DropDown List SelectedIndex is not working with getElementById in javascript

Question

I have a DropDown list named as batches. If I selected 2nd option,dropdown.selectedIndex inside the OnChange function always shows the selected index. But document.getElementById("batches").selectedIndex always shows the 1st index.
Why is this?
Actually I want read the correct selectedIndex of batches in another function that's why I need a way to get the correct selected index in both ways.

function OnChange(dropdown){
   var myindex  = dropdown.selectedIndex;// This prints correctly
   alert("Index : "+document.getElementById("batches").selectedIndex);// This is always 0 no metter what selects        
}

<select name='batches' id='batches' onchange='OnChange(this);'>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>

In which browser? Firefox and IE give the correct index every time. — RobG
– RobG, Commented Aug 8, 2012 at 2:58
Hi All! I'm genenerating this dropDown box dynamically using php. In that case, another dropdown box with the same name and ID has been added in another area.That's why it getting the value of it. Thanx for your effort and advices. Shame on me for not seeing that mistake! — namalfernandolk
– namalfernandolk, Commented Aug 8, 2012 at 4:04

RobG · Accepted Answer · 2012-08-08 03:07:12Z

1

I don't know what browser you are testing in, but the following always shows true in all browsers I tested in:

<select id="batches" onchange="
  alert(this.selectedIndex == document.getElementById('batches').selectedIndex);
">
  <option value = "1">1
  <option value = "2">2
  <option value = "3">3
</select>

<!-- and to confirm... -->
<button onclick="
  alert(document.getElementById('batches').selectedIndex);
">Show selected index</button>

I hope you aren't being confused by having options values 1, 2 and 3 correlate to selectedIndexes 0, 1 and 2.

answered Aug 8, 2012 at 3:07

RobG

148k32 gold badges180 silver badges216 bronze badges

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

2 Comments

namalfernandolk Over a year ago

Hi RonG! I'm genenerating this dropDown box dynamically using php. In that case, another dropdown box with the same name and ID has been added in another area.Thanx for your effort and advices. Shame on me for not seeing that mistake!

RobG Over a year ago

Ah yes, duplicate IDs. Now why didn't I think of that? :-)

score 1 · Accepted Answer · 2012-08-08 00:46:11Z

1

Because you call the function onChange event i.e not in the past. Try to trigger the function without onchange event and the property is selected in the past

        <select name='batches' id='batches' onchange='someFunc();'>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<a href="javascript:someFunc()">Test</a>

<script>
function someFunc(){
   //var myindex  = dropdown.selectedIndex;// This prints correctly
   alert("Index : "+document.getElementById("batches").selectedIndex);// This is always 0 no metter what selects        
}
</script>

it will work. Just copy and paste this code into your text editor and test it

edited Aug 8, 2012 at 0:46

answered Aug 8, 2012 at 0:36

user1350140

5 Comments

namalfernandolk Over a year ago

Tried. But the results is same Said. It prints the first index

user1350140 Over a year ago

@NamalFernando Please copy and paste the edited code in the answer.

user1350140 Over a year ago

@NamalFernando In other word you are not able to get the selectedIndex while the onChange event is running! You only able to get with passing this property of the object which reflects its current state.

RobG Over a year ago

@SaidBakr—not at all. The change event occurs after the value has changed since that is a condition for dispatching the event (i.e. that the value of the control has changed).

namalfernandolk Over a year ago

Hi Said! I'm genenerating this dropDown box dynamically using php. In that case, another dropdown box with the same name and ID has been added in another area.Thanx for your effort and advices. Shame on me for not seeing that mistake!

Collectives™ on Stack Overflow

DropDown List SelectedIndex is not working with getElementById in javascript

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related