Question

I am new to HTML and javascript. Was playing around with it and faced with this issue. I have a table and each row of this table has a dropdown box and a button. When I click on the button I try to extract the value from the corresponding dropdown box..but I always get the value from first dropdown box which is not what I want.

<tr>
<td><?php $version=$row->getVersionNumbers() ?>
 <select id="drop1" name="version" class="temp"> 
<?php foreach($version as $ver): ?>

      <option value="<?php echo $ver?>"><?php echo $ver?></option>

<?php endforeach; ?> </td>
</select>
<td style="text-align:center;">

<a class="btn" href="<?php echo  
 $view['router']->generate('ProjectMonstroTameBundle_view', array('versi'=>1 )) ?>"  
 onclick="viewSchema(this,pullVersion(document.getElementById('drop1')))">View Schema</a>

 </td>>

 </tr>

 <script>
 function pullVersion(dropdown)
 {
    return dropdown.options[dropdown.selectedIndex].value;
 }
 </script>

for onclick pullVersion always gets version number from first dropdown box…Could anyone help me as to how I should fix this

Answer 1

For a single select where the options all have a value, you can simply use the value property of the select element:

document.getElementById('drop1').value;

Where the element is a multiple select, you need to iterate over the options and get the value of those that are selected:

var sel = document.getElementById('drop1');
var values = [];

for (var i=0, iLen = sel.options.length; i<iLen; i++) {

  if (sel.options[i].selected) {
    values.push(sel.options[i].value);
  }
}