javascript - 从特定选择选项获取属性值

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>

我想从属性价格中获取值(value)，但它不起作用。有什么想法吗？

Answer 1

$("#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. 使用此上下文
2. 使用 data-* 属性，因为价格不是有效属性