<select> get selected option number

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?

Why don't you assign a value to each option? Which is the reason you don't want to do this? — Christos
– Christos, Commented Jun 15, 2017 at 21:08

Barmar · Accepted Answer · 2017-06-15 21:13:49Z

3

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>

answered Jun 15, 2017 at 21:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jur Dekker Over a year ago

This one is perfect, because it start with 0. thanks you.

Christos Over a year ago

@jurdekker didn't you ask in your question to start with 1?

Jur Dekker Over a year ago

Yes, but sorry. i forgot it.

Barmar Over a year ago

This starts with 1 because 0 is the option that means they didn't select anything. But if you get rid of that you can easily just add 1.

Christos · Accepted Answer · 2017-06-15 21:20:54Z

1

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>

answered Jun 15, 2017 at 21:20

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Comments

Stephen Adkins · Accepted Answer · 2017-06-15 21:34:53Z

1

$('#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"))
})

edited Jun 15, 2017 at 21:34

answered Jun 15, 2017 at 21:13

Stephen Adkins

1001 silver badge9 bronze badges

2 Comments

Barmar Over a year ago

Why not use $("#mySelect option:selected") instead of a loop?

Mohamed-Yousef Over a year ago

instead of .each you can directly use $('option:selected' , this).index()

Collectives™ on Stack Overflow

<select> get selected option number

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related