jquery to get value from multiple select box

Question

I'm developing a website for a hotel. here I lists the number of rooms available from each category. the user can choose each room from all category. Now i need is to alert when the user selects a room from each category.

i need to alert the values of all select option when any one of the room selected

thanks.

The code is

 $( ".edit-room" ).change(function() { alert($(this).val()); }); 

 <select name="room1" class="edit-room"> <option value="0">0</option> <option value="10">1</option> <option value="20">2</option> </select> <select name="room2" class="edit-room"> <option value="0">0</option> <option value="10">1</option> <option value="20">2</option> </select> <select name="room3" class="edit-room"> <option value="0">0</option> <option value="10">1</option> <option value="20">2</option> </select> 

Answer 1

i need to alert the values of all select option when any one of the room selected

Well then don't just alert the value of the element the event happened upon, but for all elements:

$( ".edit-room" ).change(function() {
  $( ".edit-room" ).each(function() {
    alert($(this).val());
  })
});

(And if you don't want three individual alerts, then append the values to a string variable first, and then alert that after the each loop.)

Answer 2

It seems that you missed adding a jquery library in your code and that is why alert is not being shown in your case.

Alert

Click on above link and you will see alert are coming fine.

I am using same code, nothing changed except adding jquery library.

$( ".edit-room" ).change(function() {

$( ".edit-room" ).each(function(i, obj) {
alert($(this).val());
});
});

Hope this helps you...

Answer 3

This is how you can get the values of all select boxes on change of any select box.

<select name="room1" class="edit-room">
  <option value="0">0</option>
  <option value="10">1</option>
  <option value="20">2</option>
</select>

<select name="room2" class="edit-room">
  <option value="0">0</option>
  <option value="10">1</option>
  <option value="20">2</option>
</select>

<select name="room3" class="edit-room">
  <option value="0">0</option>
  <option value="10">1</option>
  <option value="20">2</option>
</select>


$( ".edit-room" ).change(function() {
  $( ".edit-room" ).each(function(index) {
      alert("Value of " + (index+1) +" select box : "+$(this).val());
  });
});

Here we're using each function iterate over all the select boxes.