Problem: Alert value of dynamically created select tags.

Question

Hello.

I have an external Javascript file and i am trying to alert the value of select tags which are being generated dynamically through php.

the problem is, that it selectes the value of only the first select tag. What should i do, so that the javascript is able to independently identify each select tags value.

My <select> code looks like this:

<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><input type="button" value="vote" onclick="castvote();">

and the Javascript (which is external):

function castvote()
{    
var sel=document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);}

The javascript just alerts the value of first select tag. even if i change value of some other select tag and click on the corresponding button.

I hope i am able to explain my issue. Can someone help me with this.

Best Zeeshan

Answer 1

I don't see any problems with what you have - could be an issue with the select - you can do something like this to test:

<select id="vote"
 onChange="
  alert(this.options[this.selectedIndex].value);
  "
 >
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

Answer 2

Works for me. Tested on Safari 3 and FF 3.5. Which browser are you testing at?

Also, I would recommend using unobstrusive javascript (adding behavior to the button trhough Javascript) instead of using the "onclick" attribute.