Question

我正在尝试使用下拉列表来更改依赖于option属性的输入值，但是它会将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'来绑定元素上的change事件。

$('.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>

Answer 2

试试这个。您未从所选选项中获取数据价格，而是在您使用$（this）时直接从中选择。

th { height: 42px; font-weight: bold; font-size: 15px; vertical-align:bottom; padding: 8px 16px; margin-bottom: 5px; border-bottom: 2px dotted #999; }
th.odd { background-color: #e6e6e6; }
th.even { background-color: #ddd; }
td { padding: 16px; }
tr{ border-bottom: 2px dotted #999; }
tr.even { background-color: #eee; }
tr.even td.even { background-color: #e2e2e2; }
tr.odd td.even { background-color: #eaeaea; }

作为旁注，最好不要使用内联处理程序。更好地利用这个：

<select class="form-control" name="ph1_plantype" onChange="$('#ph1_price').val($(this).find(':selected').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)" value="" />
</div>

Answer 3

当您引用$(this)时，您正在引用下拉菜单本身，因此未定义数据价格。您想在菜单中再向下移动一步以查找所选选项。

$(this).find(':selected').attr('data-price')

我把它放在一起： http://jsfiddle.net/wvsLcqop/3/

jQuery onChange在下拉列表中

3 个答案: