javascript - 下拉菜单中的 jQuery onChange

Question

我试图获取一个下拉列表来根据选项属性更改输入的值，但它始终将 undefined 作为值。

<select class="form-control" name="ph1_plantype" onChange="document.getElementById('ph1_price').value=$(this).attr('data-price');">
    <option data-price="Arron is shit">Plan Type</option>
    <option data-price="1955">Topaz</option>
    <option data-price="2945">Pearl</option>
    <option data-price="3195">Sapphire</option>
    <option data-price="3595">Ruby</option>
    <option data-price="1695">Cremation Direct</option>
    <option>Emerald</option>
    <option>Other</option>
</select><br />

<div class="form-group input-group">
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)" >
</div>

Answer 1

使用内联处理程序被认为是一种不好的做法。使用 jQuery 的 change 或 on('change' 在元素上绑定(bind)更改事件。

$('.form-control').change(function () {
    var price = $(this).find(':selected').attr('data-price');
    $('#ph1_price').val(price);
});

<小时/>

通过使用data()获取元素上的data-*

$('select.form-control').change(function () {
    $('#ph1_price').val($(this).find(':selected').data('price'));
});

现场演示

$('select.form-control').change(function() {
  $('#ph1_price').val($(this).find(':selected').data('price') || 'No price available');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="ph1_plantype">
  <option data-price="Arron is shit">Plan Type</option>
  <option data-price="1955">Topaz</option>
  <option data-price="2945">Pearl</option>
  <option data-price="3195">Sapphire</option>
  <option data-price="3595">Ruby</option>
  <option data-price="1695">Cremation Direct</option>
  <option>Emerald</option>
  <option>Other</option>
</select>
<br />

<div class="form-group input-group">
  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
  <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)">
</div>