Показать значение атрибута данных при изменении

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

использование OnChange событие выбора ,:

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

http://jsfiddle.net/JH7MA/