获取属性值从具体选择选项

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-*因为价格属性是不是一个有效的属性