Get selected value from a select

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

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

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);
}
9 Likes

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

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

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

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

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);
}

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

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…

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

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

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

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

Worked like a charm.

if you want to access the text

Thank you so much. It worked.

did u resolve it? how?

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();

}

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

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