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

これを行う方法について何か考えはありますか？