Get selected value from a select

1

Hi, I’m fairly new to JavaScript and Ionic and I can’t figure out how to get the selected value of a select component.

                <select>
                    <option>36</option>
                    <option>37</option>
                    <option>38</option>
                    <option>39</option>
                    <option>40</option>
                </select>

How do I pass the selected option to my controller?

Thanks in advance

1 Like
2

For general Javascript Questions, SO will help you with million of already solved problems.

Take a look:

http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript

Good luck!

3 Likes
3

It depends on when you want to get the value (on change, on a button click, etc.). You can add an ng-model to your select, and if you want to get the value when it changes you can pass it in ng-change.

<select ng-model="mySelect" ng-change="showSelectValue(mySelect)">
    <option>36</option>
    <option>37</option>
    <option>38</option>
    <option>39</option>
    <option>40</option>
</select>

Then in the controller

$scope.showSelectValue = function(mySelect) {
    console.log(mySelect);
}
10 Likes
4

Thank you, this is what I needed! However, when I implement this, the first value of my select is an empty string.

image

5

Add an option with a value such as “Select a ----”. Or add a default value that exists on the list to the model:

$scope.mySelect = 36; // for example

2 Likes
6

hi i need the index of the selected item in options any one can help please

7

You didn’t give any details of your data or if you needed anything other than the index, so here is one way to do it: http://codepen.io/brandyshea/pen/wKvmmy?editors=101

1 Like
8

Thanks Worked for me, I’m using ionic2, I did some thing like this:

<ion-list>
  <ion-item>
    <ion-label>Select Hive</ion-label>
    <ion-select #newSelect [(ngModel)]="carbrand" (change)="onChange(carbrand)">
      <ion-option value="Porsche" checked="true">Porsche</ion-option>
      <ion-option value="Mercedes" >Mercedes</ion-option>
      <ion-option value="Buggati">Buggati</ion-option>
      <ion-option value="Lamborghini">Lamborghini</ion-option>
      <ion-option value="Domster">Domster</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

On Page.ts

onChange(selectedValue){
  console.info("Selected:",SelectedValue);
}
1 Like
9

I’m nitpicking here, but I think you should use a more descriptive method name than onChange, like onBrandSelectChange().

Naming it like this will come to haunt you :slight_smile:

1 Like
10

Hi! Can you show us your codes esp. on how you implemented it on the ts? :slight_smile:
I am new to ionic 2 and typescript…

11

Here is the code:

list.html

<ion-list>
  <ion-item>
    <ion-label>Select Car</ion-label>
    <ion-select #newSelect [(ngModel)]="carbrand" (change)="onChange(carbrand)">
      <ion-option value="Porsche" checked="true">Porsche</ion-option>
      <ion-option value="Mercedes" >Mercedes</ion-option>
      <ion-option value="Buggati">Buggati</ion-option>
      <ion-option value="Lamborghini">Lamborghini</ion-option>
      <ion-option value="Domster">Domster</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

Typescript code:
export class List { constructor(){ } onChange(SelectedValue){ console.log("Selected car", SelectedValue); } }

This will print the selected value on the console

12

Amazing~! It’s now working! :grinning:
Thank u so much for you immediate reply. :slight_smile:

13

Hi maam what im getting is the value what i want to access is the text not the value.

14

http://jsfiddle.net/TXJE6/8/

Worked like a charm.

15

if you want to access the text

image
Screenshot (41).png1639×813 60.1 KB

16

Thank you so much. It worked.

17

did u resolve it? how?

18

Hi, i am new to Ionic and in Ionic 2
I need to select the radio selected value and need to set to the label value. Can you please help

Please check my code

HTML code

<ion-label {{gender}}>Gender
<button ion-button item-right (click)=“presentGender()”>Select

Typescript

let alert = this.alertCntrl.create();
alert.setTitle(‘Select Gender’);

alert.addInput({
  type: 'radio',
  label: 'Male',
  value: 'Male',
  checked: true
});

alert.addInput({
  type: 'radio',
  label: 'Female',
  value: 'Female',
  checked: false
});

alert.addButton('Cancel');
alert.addButton({
  text: 'OK',
  handler: data => {
    this.radioResult = data;
    console.log("data", this.radioResult);
    this.gender = this.radioResult;
   
  }
});
alert.present();

}

19

But what if i want to get ion-select value on my ts page on load…

20

how its works you need to usine ionChange event and there you only use change