![](/img/trans.png)
[英]Javascript text link onClick to select dropdown option value (onChange?)
[英]Javascript to select dropdown option using value from text input?
我需要 select 基於我的用戶將在文本字段中輸入的內容的下拉選項。 文本字段是一個數字,下拉列表將數字放在一個范圍內,以根據所選價格范圍計算總和。
處理此問題的表格部分是:
<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
<option value="0-100 beds|10" price="">0-100 beds </option>
<option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option>
<option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option>
<option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option>
</select>
我使用的 javascript 是:
<script>
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumber = document.getElementById('input_1_20') ;
if (bedNumber <= '100') {
setSelectedValue(selectObj, "0-100 beds|10"); }
else if (bedNumber <= '250') {
setSelectedValue(selectObj, "101-250 beds|7.5"); }
else if (bedNumber <= '500') {
setSelectedValue(selectObj, "251-500 beds|5"); }
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
})
</script>
我沒有收到任何 javascript 錯誤,但 select 字段未更新。 任何人都可以建議嗎?
更新:鏈接到小提琴 - https://jsfiddle.net/xg6ktr1a/
謝謝!
$('#input_1_20').change(function() { var bedNumber = parseInt(document.getElementById('input_1_20').value); console.log(bedNumber) if (bedNumber <= 100) { $("#input_1_15 option[value='0-100 beds|10']").prop('selected', true); } else if (bedNumber > 100 && bedNumber <= 250) { $("#input_1_15 option[value='101-250 beds|7.5']").prop('selected', true); } else if (bedNumber > 250 && bedNumber <= 500) { $("#input_1_15 option[value='251-500 beds|5']").prop('selected', true); } else { $("#input_1_15 option[value='501+ beds|2500']").prop('selected', true); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input name="input_12" id="input_1_20" type="text" value="" class="medium"> <select name="input_15" id="input_1_15"> <option value="0-100 beds|10" price="">0-100 beds </option> <option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option> <option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option> <option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option> </select> </form>
不要循環遍歷 select 選項,而是嘗試簡單地設置 select 元素本身的value
。 這是另一個 SO 用戶的選擇值設置方法的比較。
此外,您正在嘗試對字符串而不是數字使用小於/大於比較...所以這些條件永遠不會滿足。 您可以通過將bedNumber
為 integer,然后檢查該數字來解決此問題。
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumberInput = document.getElementById('input_1_20');
// coerce this value to a Number
var bedNumber = parseInt(bedNumberInput.value);
if (bedNumber <= 100) {
selectObj.value = "0-100 beds|10";
}
else if (bedNumber <= 250) {
selectObj.value = "101-250 beds|7.5";
}
else if (bedNumber <= 500) {
selectObj.value = "251-500 beds|5";
}
else {
selectObj.value = "501+ beds|2500";
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.