jQuery onChange在下拉列表中

我試圖讓下拉菜單改變依賴於選項屬性的輸入值，但是它始終將undefined作爲值。jQuery onChange在下拉列表中

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

來源

2015-11-04 Arron

爲什麼不使用** option value =「」**？並且您有沒有**數據價格的選項** –

數據庫正在將數據存儲在選項中，如果使用Value，它將覆蓋這些數據。 – Arron

試試這個。您沒有選擇數據價格，而是從使用$（this）時直接選擇。

<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')); 
});

來源

2015-11-04 15:27:29

也建議不要使用內聯處理程序。 – Tushar

你說得對，但我試圖首先解決她的JS問題。謝謝。 –

當你引用$(this)你引用自身的下拉菜單中，因此不確定的數據價格。您想要遍歷菜單中的更多步驟以找到所選的選項。

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

我已經把這個一起在這裏： http://jsfiddle.net/wvsLcqop/3/

來源

2015-11-04 15:29:39 Yuschick

它被認爲是一個壞實踐使用內嵌處理器。使用jQuery的change或on('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>

來源

2015-11-04 15:31:53

jQuery onChange在下拉列表中

回答

相關問題