jQuery关于更改事件的选择框

Question

I have a dropdown that will change with respect to the first value (ie from_value). What I'm trying to do is. There will be numbers from 1 to 10. So if the first value is selected as 2, then the second value (ie to_value) should be populated with 2 to 10 in the dropdown.

Below is my code and I'm not sure to run the loop here. Could someone help me in running the loop and do my task.

In other words - If the first drop down is selected with value 2, then the second dropdown should populate with 2,3,4,5,6,7,8,9,10 If the first dropdown is selected with 8, then the second dropdown should show 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

Hope you are getting value in from_value . Then you could try this

$("#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

try

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

DEMO