使用HTML jQuery处理选择框值

Question

I have a code like this.

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>

JQuery:

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

The code is shared in jsfiddle for easy editing. http://jsfiddle.net/fuub1wrd/1/

When the from value is changed, the to value is getting changed based on from_value event.

Now, what I'm trying to do is.

If the from_value is 5 , then the to_value should display 5,6,7,8 only (only four values from the selected value)

In other words, display only four values with respect to the from_value. If from_value is 6 , then in to_values i should be able to see only 6,7,8,9

How can I achieve that? I know this is bit easy, but still, I'm sitting with my code.

Thanks, Kimz

Answer 1

Try this...

$("#from_value").change(function () {
    var val = +this.value;
    $("#to_value option")
    .hide()
    .filter(function() {
        return ($(this).val() >= val && $(this).val() < val + 4);
    })
    .show();
    $("#to_value").val(val);
});

http://jsfiddle.net/fuub1wrd/4/

It hides all the options and then uses the filter() function in order to identify the options you want to show.

Answer 2

Try this:

HTML:

<select id="from_value">
    <option value="0">select</option>
    <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="0">select</option>
    <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>

Jquery :

$("#from_value").change(function () {
    var val = +this.value;
    $("#to_value option").removeAttr('disabled');
    $("#to_value option:lt(" + val + ")").attr('disabled','disabled');
});

DEMO