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.

Answer 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

Answer 2

There are two things you need to change here:

1. You need to set an event handler to the zip input element. $('#zip').val( ... ); only sets the value once when that line is executed.

2. 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

Answer 3

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.