Handling select box values using 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

Please do not "tag-spam". Your question has nothing to do with php or the jquery-validate plugin. Edited. Thanks. — Sparky
– Sparky, Commented Sep 29, 2014 at 14:32

Reinstate Monica Cellio · Accepted Answer · 2014-09-29 10:06:11Z

3

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.

answered Sep 29, 2014 at 10:06

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kartikeya Khosla · Accepted Answer · 2014-09-29 10:18:39Z

0

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

edited Sep 29, 2014 at 10:18

answered Sep 29, 2014 at 10:02

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

1 Comment

user3350885 Over a year ago

please read my question again and help me out. this is not working as expected. thanks anyway.

Collectives™ on Stack Overflow

Handling select box values using HTML jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related