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>

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>

• javascript
• html-select

Share Improve this question Follow edited Dec 16, 2013 at 10:19 BenMorel 36.7k5151 gold badges205205 silver badges336336 bronze badges asked Aug 8, 2012 at 0:24 namalfernandolknamalfernandolk 9,1341515 gold badges6969 silver badges119119 bronze badges 2

• In which browser? Firefox and IE give the correct index every time. – 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 Commented Aug 8, 2012 at 4:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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