Ahmadz Issa Ahmadz Issa - 1 month ago 8
Javascript Question

How to get value from multiple SELECT tags (Jquery)

I'm trying to get the value from each option I select h , but the jquery return the value for the first select only!.
I have no idea how to fix it.

<select id="Group" >
<option value="">Select Group</option>
<option value="1">1</option>
<option value="1">d</option>
<option value="1">d</option>
<option value="1">d</option>
</select>

<select id="Group" >
<option value="">Select Group</option>
<option value="2">1</option>
<option value="2">d</option>
<option value="2">d</option>
<option value="2">d</option>
</select>


Jquery code

<script>

$(document).ready(function(){
$('#Group').change(function(){

var group_id2 = $('#Group').val();

alert(group_id2);
$.ajax({
url:"../include/ajax_process/doc_process.php",
method:"POST",
data:{group_id:group_id},
dataType:"text",
success:function(data)
{
$('#employee').html(data);
}
});
});
});
</script>

Answer

Couple of things -

ID should always be unique, so you shouldn't have two elements on the page with the same ID. That said, let's assume you update this a bit and maybe use a class, for example -

$('.group').change(function(){

OK, now you want the value of the CHANGED element. You can do this by looking at the event

$('.group').change(function(e) {
  var data = $(e.target).val();
  // (etc do the rest of your code here)
});