下拉列表根據文本字段的值而變化

Question

我對javascript不太滿意，我什至不知道這是否可行。

我試圖根據文本字段的值選擇一個下拉列表

我有以下文本字段，該文本字段是通過將成人和兒童的數量加在一起得出的。

<input type="text" name="Total" id="Total" onfocus="this.blur()"/>

我想做的是根據Total的值進行以下下拉更改。即，如果Total小於10，則下拉顯示1 Hr，介於10到20之間的顯示2 Hr等

<select name="Duration">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>

Answer 1

我認為這是您需要遵循的總體方向（我僅包括總數少於10的情況，因此您需要將其他情況添加到if語句中）：

<input type="text" name="Total" id="Total" onfocus="this.blur()" onblur="if(this.value < 10) { document.getElementById('totalDropDown').value = 1; }"/>

<select name="Duration" id="totalDropDown">
    <option value="1">1 Hr</option>
    <option value="2">2 Hrs</option>
    <option value="3">3 Hrs</option>
    <option value="4">4 Hrs</option>
</select>

Answer 2

您可以看一下這個小提琴： http : //jsfiddle.net/knnw8/1/

我將從

<input type="text" name="Total" id="Total" onChange="fillCombobox(this)"/>

然后在組合框中分配所需的選項，就像在小提琴中看到的那樣（當然也可以使用onBlur代替onChange）

編輯：我已經根據您的需求更新了小提琴

Answer 3

試試這個，我認為這是您需要的

<script type="text/javascript">

    function chkVal(ele){
        var val = ele.value;
        console.log(val);
        if(val < 10){
            $('#totalDropDown').val(1)
        }
        else if(val <= 20){
            $('#totalDropDown').val(2)
        }
        else if(val <= 30){
            $('#totalDropDown').val(3)
        }
        else if(val > 30){
            $('#totalDropDown').val(4)
        }

    }

</script>

<input type="text" onkeyup="chkVal(this)"/>

<select name="Duration" id="totalDropDown">
    <option value="1">1 Hr</option>
    <option value="2">2 Hrs</option>
    <option value="3">3 Hrs</option>
    <option value="4">4 Hrs</option>
</select>