1

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>
BenMorel
  • 34,448
  • 50
  • 182
  • 322
ironwood
  • 8,936
  • 15
  • 65
  • 114
  • In which browser? Firefox and IE give the correct index every time. – RobG Aug 08 '12 at 02: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! – ironwood Aug 08 '12 at 04:04

2 Answers2

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

  • Tried. But the results is same Said. It prints the first index – ironwood Aug 08 '12 at 00:41
  • @NamalFernando Please copy and paste the edited code in the answer. –  Aug 08 '12 at 00:46
  • @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. –  Aug 08 '12 at 00:51
  • @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). – RobG Aug 08 '12 at 03:00
  • 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! – ironwood Aug 08 '12 at 03:56
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.

RobG
  • 142,382
  • 31
  • 172
  • 209
  • 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! – ironwood Aug 08 '12 at 03:57
  • Ah yes, duplicate IDs. Now why didn't I think of that? :-) – RobG Aug 08 '12 at 04:22