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.
2 answers
solution1
1 2016-10-08 14:02:20
this is how you can get all needed data when a selection .refer the working demo.
<html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> </style> <body> <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> </div> <script type="text/javascript"> $("div#hotel_room select").click(function(){ var getTheName = $(this).attr('name'); var getThePrice = $(this).attr('price'); var getTheValue = $(this).val(); alert("NAME :----> "+getTheName +" PRICE :-----> "+getThePrice +" VALUE :-----> "+getTheValue); }); </script> </body> </html>
hope this will help to you.
solution2
0 ACCPTED 2016-10-08 14:36:50
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Select2 jquery - How to get text in selectbox
Get 2 values from ONE selectbox (optgroup and option selected) with jQuery
Is there a way to select all option values in selectbox?
How to select a selectbox an option value with JS?
jQuery array values get into select option values?
How to clear select option when user select another option Jquery or Vanilla Jquery
how to get all select option values using jquery
How to get all option values in a multiple select with jquery?
Selectbox not allow user to select other option if condition met
How to get ID of select when user selected option?
Related Tags