使用JavaScript获取垂直列表框选定的值

Question

I have html listbox as, which has same name but different id

<select name="dept"  id="vrow" >
                        <option selected="selected" > - Select Department- </option>
                        <option value="GEN">computer </option>
                        <option value="SC">mac </option>
                        <option value="ST">civ </option>
                        <option value="OBC">ele </option>
                      </select>

i had atteched it to each row fetched from database, how can i get ID if i change perticular listbox value.

Answer 1

If you need id then use:

document.getElementById('vrow').addEventListener('change', function(e) {
   if (e.target.name==='dept') {
     alert(e.target.id);
   }
})

Working Demo

If you need value then use:

document.getElementById('vrow').addEventListener('change', function(e){
   if (e.target.name==='dept') {
       alert(e.target.value);
   }
})

Working Demo

Answer 2

You can add event listener on change event to parent node of all <select> elements it can ul if they are in list or even body .

<script type="text/javascript">
  document.getElementByTagName('UL').addEventListener('change', function(e) {
    if (e.target.name==='dept') {
      //In this case you have got element that you need and its id 
      //e.target.id
      alert(e.target.id);
    }
  });
</script>

Answer 3

You Write Javascript Function or Jquery function

like this

<select onchange="dept(this.value)" name="dept"  id="vrow" >
<option selected="selected" > - Select Department- </option>
<option value="GEN">computer </option>
<option value="SC">mac </option>
<option value="ST">civ </option>
<option value="OBC">ele </option>
</select>

<script type="text/javascript">
function dept(id){
$.ajax({
url: 'ajax.php',
data: { id: id} ,
success: function (response) {
try{
alert(response);
}
catch(e){
alert("Error"+e);
}
},
error: function (e) {
alert("error"+e); or alert("error"+JSON.stringify(e));
}
});
}
</script>

Ajax.php