当用户在jQuery中选择一个选项时,如何获取selectbox值和价格?

时间:2016-10-08 13:49:08

标签: javascript jquery

例如这家酒店有3个房间:

cd ~

其他酒店有4个房间:

<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> 

当使用jquery进行选择时,如何让用户<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> selectedprice获得。

2 个答案:

答案 0 :(得分:1)

needed。引用工作演示时,您可以获取所有selection数据。

<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>

希望这会对你有所帮助。

答案 1 :(得分:0)

看看这段代码,也许它会对你有帮助。

$('#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>