jQuery Show / Hide Option Based on Input Value

Question

I have a form that needs to display specific select options ("locations") based on the user's ZIP, which is in a number field above. In this example, I need the option "Out of Range" to hide and the "In Range" to show when the user enters "12345" in the input.

This is my HTML:

<!--Zip-->
<div class="zip-field">
    <label for="zip">Zip Code</label>
    <input type="number" id="zip" name="zip" />
</div>

<!--Location-->
<div class="location-field">
    <label for="location">Location</label>
    <select id="location" name="location">
        <option value="In Range">In Range</option>
        <option value="Out of Range">Out of Range</option>
    </select>
</div>

This is my jQuery:

$('#zip').on('change',function(){
    if ( $(this).val() == "12345" ) { 
        $("#location option[value='In Range']").show();
        $("#location option[value='Out of Range']").hide();
    }
});

Should be pretty straightforward, but no cigar.

hiding a option element does not have cross browser support... you need to remove them — Arun P Johny
– Arun P Johny, Commented Sep 26, 2013 at 1:08

Rick Hanlon II · Accepted Answer · 2013-09-26 01:06:01Z

2

There are two things you need to change here:

You need to set an event handler to the zip input element. $('#zip').val( ... ); only sets the value once when that line is executed.
You need to select the option better. $("#location option[value='In Range']").show(); will not show the option you want. You have to set the value of the selector input to a value that matches the option you want.

Change your javascript to this:

$("#zip").on('blur', function(){
   if ( $(this).val() == "12345" ) { 
       $("#location").val("In Range");
   }else{
       $("#location").val("Out of Range");
    }
});

Notice that I'm using $('#zip').on('blur', ...); to register an event handler, setting it to the blur event and passing in a function to be executed when that event fires.

Then I set the value of the location selector input to the correct value of the option you want to select.

DEMO

answered Sep 26, 2013 at 1:06

Rick Hanlon II

22k7 gold badges49 silver badges54 bronze badges

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

2 Comments

Andrew Over a year ago

This is awesome. Thank you for the conciseness! I will definitely use this later. But I need to hide it so the user can still have the option to choose one. Sorry I shouldve made that clear in example. . .

Rick Hanlon II Over a year ago

Thanks, I misunderstood what you meant as 'hide'.

PSL · Accepted Answer · 2013-09-26 01:53:12Z

1

Hiding an option won't work across browsers, it is same as binding event to option elements you can do only very limited thing with them. instead remove them and cache them for later use.

$(function(){
    var $location = $('#location');
    $location.data('options', $location.find('option')); //cache the options first up when DOM loads
    $('#zip').on('change', function () { //on change event
        $location.html($location.data('options')); //populate the options
        if ($(this).val() == "12345") { //check for condition
            $location.find("option[value='Out of Range']").remove(); //remove unwanted option
        }

    });
});

Fiddle

edited Sep 26, 2013 at 1:53

answered Sep 26, 2013 at 1:12

PSL

124k21 gold badges257 silver badges243 bronze badges

9 Comments

Rick Hanlon II Over a year ago

Why do this when you can pick the option you want by setting the value of the selector to match an option value? E.g. $("#location").val("In Range");

PSL Over a year ago

@RickHanlonII See OP. He wants to hide them. Read the question completely. If it was just setting a value he might not have even asked this as a question here.. pretty straight forward right...

Andrew Over a year ago

@RickHanlonII Yeah I need the user to still have the ability to choose one from a list. :( I should have mentioned that in the example. Lemme try PSL's. . .

PSL Over a year ago

@Andrew yeah with this you can choose , only thing is when it is out of range you dont event want to show other options to the user right?

Andrew Over a year ago

@PSL correct. Almost done trying it out on my own. . . thanks so much for the help! I'll let you know what happens.

|

Chase · Accepted Answer · 2013-09-26 01:16:16Z

1

You should monitor the the value as it changes using the method below:

$('#zip').on('keyup',function(){
    $("#location").val('Out Of Range');
    if ( $(this).val() == "12345" ) { 
        $("#location").val('In Range');
    }
});

The on function binds an event listen to that Element. The keyup event listens for when the key is released inside the your field. You can then compare the value to what ever and show / hide as needed.

edited Sep 26, 2013 at 1:16

answered Sep 26, 2013 at 0:57

Chase

9,3625 gold badges55 silver badges80 bronze badges

4 Comments

Andrew Over a year ago

Thank you! I updated my code to reflect yours. . . but I still cannot get it to work. :/

Rick Hanlon II Over a year ago

@Andrew that's because of the way you're "showing" the option you want. See my answer for the right way to do this.

Chase Over a year ago

Hes right, I didnt look close enough at your question to realize your selectors where off. Update my answer

Andrew Over a year ago

I used your 'keyup' function in my final product though! I didn't even know that existed, so thank you very much. ^_^

Collectives™ on Stack Overflow

jQuery Show / Hide Option Based on Input Value

3 Answers 3

2 Comments

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related