javascript - 在更改时显示数据属性的值

Question

我必须链接选择控制器，用户可以在其中选择曝光，然后根据他们选择的曝光类型单击包。我的问题是显示这些包裹的价格。

目前我正在尝试这样做：

<select id='mark' name='mark'>
    <option value=''>--</option>
    <option value='micro'>Micro Exposure</option>
    <option value='mini'>Mini Exposure</option>
</select>
<select id='clicks' name='series'>
    <option value=''>--</option>
    <option value='clicks-2500' class='micro' data-price='4'>2500 Clicks</option>
    <option value='clicks-5000' class='micro' data-price='7'>5000 Clicks</option>
    <option value='clicks-10000' class='micro' data-price='13'>10000 Clicks</option>
    <option value='clicks-500' class='mini' data-price='4'>500 Clicks</option>
</select>
<script>
    $(function() {
        $('.micro').change(function() {
            $('#amountDiv').text($(this).data('price'));
        });
    });

    $(function() {
        $('.mini').change(function() {
            $('#amountDiv').text($(this).data('price'));
        });
    });
</script>
<div id='amountDiv'></div>

如您所见，我正在使用 HTML5 数据属性存储包裹的价格，但我无法让它显示在#amountDiv

关于如何做到这一点的任何想法？

Answer 1

使用 select 的 onchange 事件：

$('#clicks').change(function () {
    alert($(this).find('option:selected').data('price'));
});

http://jsfiddle.net/JH7MA/