2016-10-08 44 views
0

例如,這家酒店是3間客房:當用戶在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> 

等酒店是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> 
<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> 

我怎麼能得到用戶selectedpricevalue當選擇發生在使用jquery時。

+2

您必須添加一個解釋的問題是什麼,我們不是心理 – adeneo

回答

0

看看這段代碼,也許它會幫助你。

$('#button1').on('click', function() { 
 
\t $('select').each(function(index) { 
 
\t console.log($(this).attr('name') + ': price=' + $(this).attr('price') + ' selected option: ' + $(this).val()); 
 
\t }); 
 
});
<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>

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(){ 
 
\t 
 
\t var getTheName = $(this).attr('name'); 
 
\t var getThePrice = $(this).attr('price'); 
 
\t var getTheValue = $(this).val(); 
 
\t alert("NAME :----> "+getTheName +" PRICE :-----> "+getThePrice +" VALUE :-----> "+getTheValue); 
 

 

 
}); 
 

 

 

 

 
</script> 
 
</body> 
 

 
</html>

希望這將有助於你。

相關問題