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

时间:2013-06-09 14:23:58

标签: javascript jquery html5

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

目前我正在尝试这样做:

<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

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

1 个答案:

答案 0 :(得分:1)

使用select的onchange事件:

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

http://jsfiddle.net/JH7MA/