<select>获取选择的选项号

Question

So i have a <select> with option, but what i want when i select a option to get the option number.

I do not want him to grab attributes(No value & text). Because it is dynamic.

Example:

<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

When i select Apple, that I get a response 1. so with Pear: 2. and so on.

I have found: W3school , But this will show how many option are available.

What someone here a solution for?

Answer 1

You can use the selectedIndex property of the <select> .

 $("#mySelect").change(function() { console.log("Selected option is " + this.selectedIndex); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="mySelect"> <option>Choose a fruit</option> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> </select> 

Answer 2

$('#mySelect').change(function(){
    $(#mySelect option).each(function(index){
        if ($(this).attr('selected') {
            console.log(index);
        }
    });
})

You may have to change out .attr() for .prop() depending on your version of Query

May also use

$('#mySelect').change(function(){
    $("#mySelect option").index($("#mySelect option:selected"))
})

Answer 3

You could try something like this using plain JavaScript:

 document.addEventListener('DOMContentLoaded', function(){ var selectEle = document.getElementById('mySelect'); selectEle.addEventListener('change', function(item){ console.log(selectEle.selectedIndex + 1); }); }); 

 <select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> </select>