[英]jQuery onChange in a dropdown
我試圖獲得一個下拉列表,以根據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>
使用內聯處理程序被認為是不好的做法。 使用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>
嘗試這個。 您不是從選定的選項中獲取數據價格 ,而是在使用$(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'));
});
當您引用$(this)
您引用的是下拉菜單本身,因此是未定義的數據價格。 您想再遍歷一下菜單來查找選定的選項。
$(this).find(':selected').attr('data-price')
我將其放在這里: http : //jsfiddle.net/wvsLcqop/3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.