jQuery關於更改事件的選擇框

Question

我有一個下拉列表，該下拉列表將相對於第一個值（即from_value）發生變化。 我想做的是。 會有從1到10的數字。因此，如果第一個值選擇為2，則第二個值（即to_value）應在下拉列表中填充2到10。

下面是我的代碼，我不確定在這里運行循環。 有人可以幫助我運行循環並完成任務。

換句話說-如果選擇的第一個下拉菜單值為2，則第二個下拉菜單應填充2,3,4,5,6,7,8,9,10如果選擇的第一個下拉菜單為8，則第二個下拉菜單應顯示8,9,10

$("#from_value").change(function(){
    var from_value = $("#from_value").val();
    $("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value"><option>'+ from_value +'</option></select>');
});

Answer 1

希望您在from_value中獲得價值。 那你可以試試看

$("#from_value").change(function() {
    var from_value = $("#from_value").val();
    var opts = '';
    for(var i = from_value; from_value <=10; i++)
    {
        opts = opts+'<option>' + i + '</option>';
    }
    $("div.to_value").html('<label>To Value</label><select name="to_value" id="to_value">' + opts + '</select>');
});

Answer 2

嘗試

的HTML

<select id="from_value">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<select id="to_value">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

JS

$("#from_value").change(function () {
    var val = +this.value;
    $("#to_value option").hide();
    $("#to_value option:gt(" + val + "),#to_value option:eq(" + val + ")").show();
    $("#to_value").val(val);
});

演示