How to get selectbox values and prices when user select a option in jQuery?

Question

For example this hotel is 3 rooms:

<div id="hotel_room">

<select name="room_1" price="30" multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select> 

<select name="room_2" price="40" multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select> 

<select name="room_3" price="50"  multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select>

And other hotel is 4 rooms:

<div id="hotel_room">

<select name="room_1" price="30" multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select> 

<select name="room_2" price="40" multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select> 

<select name="room_3" price="50"  multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select> 

<select name="room_3" price="50"  multiple="multiple">

      <option value="1">option 1</option>

      <option value="2">option 2</option>

      <option value="3">option 3</option>

      <option value="4">option 4</option>

</select>

how can I get the users

selected

,

price

,

value

when a selection happened using jquery.

Answer 1

Look at this code, maybe it will help you.

$('#button1').on('click', function() {
	$('select').each(function(index) {
	console.log( $(this).attr('name') + ': price=' + $(this).attr('price') + ' selected option: ' + $(this).val() );
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hotel_room">
<select name="room_1" price="30" multiple="multiple">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
</select> 
<select name="room_2" price="40" multiple="multiple">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
</select> 
<select name="room_3" price="50"  multiple="multiple">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
</select> 
<button id="button1">Click</button>
</div>

How to get selectbox values and prices when user select a option in jQuery?

Sign up