獲取屬性值從具體選擇選項

Question

如何訪問一個可選屬性值，當我選擇它？

這是我的HTML

<select name="property_id"> 
    <option value="1" price="15000">Property A</option> 
    <option value="2" price="21000">Property B</option> 
</select> 

這是我的JS

<script> 
$(document).ready(function(){ 
    var $price  = $(this).attr('price'), 
     $percentage = $("input[name='participation_percent']").on("input", calculatePrice), 
     $discount = $("input[name='participation_amount']").on("input", calculatePerc); 

    function calculatePrice() { 
     var percentage = $(this).val(); 
     var price  = $price.val(); 
     var calcPrice = (price * percentage/100).toFixed(2); 
     $discount.val(calcPrice); 
    } 

    function calculatePerc() { 
     var discount = $(this).val(); 
     var price = $price.val(); 
     var calcPerc = (discount * 100/price); 
     $percentage.val(calcPerc); 
    } 
</script> 

我想要得到的屬性值的價格，但它不工作。 有什麼想法？

Answer 1

選定的選項將被髮送到與每一個變化的控制檯。您也可以將其存儲在某個變量中以供將來使用。

添加代碼：$("#select").val()。

注意：您沒有指定您希望顯示其精確值做，所以我增加了兩個案例 - value和price。

$(document).ready(function() { 
 
    var $price = $(this).attr('price'), 
 
    $percentage = $("input[name='participation_percent']").on("input", calculatePrice), 
 
    $discount = $("input[name='participation_amount']").on("input", calculatePerc); 
 

 
    function calculatePrice() { 
 
    var percentage = $(this).val(); 
 
    var price = $price.val(); 
 
    var calcPrice = (price * percentage/100).toFixed(2); 
 
    $discount.val(calcPrice); 
 
    } 
 

 
    function calculatePerc() { 
 
    var discount = $(this).val(); 
 
    var price = $price.val(); 
 
    var calcPerc = (discount * 100/price); 
 
    $percentage.val(calcPerc); 
 
    } 
 
}); 
 

 
function getVal() { 
 
    console.log($("#select").val()); 
 
    console.log($("#select option:selected").attr('price')); 
 
} 
 

 
getVal();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="property_id" onchange='getVal()' id='select'> 
 
    <option value="1" price="15000">Property A</option> 
 
    <option value="2" price="21000">Property B</option> 
 
</select>

Answer 2

.val()是一種jQuery方法，它爲您提供<input>的value屬性。

例子：

<input value="some-value" id="demo" /> 
$("#demo").val(); 
// will return "some-value" 

它不會給你一個<input>的屬性值。在語義上它可能是一個小小的差異，但它是一個重要的。

例子：

<input value="some-value" id="demo" price="12345" /> 
$price = $("[price]").val(); 
// will also return "some-value", 
// it doesn't matter you called the var `$price` or that you used 
// the `price` attribute to select it from DOM 

爲了獲得price自定義屬性的任何元素的值，考慮到你的榜樣，你應該使用：

<input price="1234" /> 
$(this).attr('price'); 
// will return "1234" 

*在所有以上例子$(this)是應該是圍繞之前列出的元素的jQuery包裝。

Answer 3

$("#select").change(function() { 
 

 

 
    alert($("option:selected", this).attr("data-price")) 
 

 
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="property_id" id='select'> 
 
    <option value="1" data-price="15000">Property A</option> 
 
    <option value="2" data-price="21000">Property B</option> 
 
</select>

1. 使用this方面
2. 使用data-*因爲價格屬性是不是一個有效的屬性