jQuery onChange的下拉列表中

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）时直接从select中获取数据价格 。

<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>

---

附带说明一下，最好不要使用内联处理程序。 最好使用这个：

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

Answer 3

当您引用$(this)您引用的是下拉菜单本身，因此是未定义的数据价格。 您想再遍历一下菜单来查找选定的选项。

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

我将其放在这里： http : //jsfiddle.net/wvsLcqop/3/