基于输入值的jQuery显示/隐藏选项

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.

我有一个表单，需要根据用户的ZIP显示特定的选择选项（“位置”），这在上面的数字字段中。在这个例子中，我需要选项“超出范围”来隐藏，并且“范围内”显示用户在输入中输入“12345”的时间。

This is my HTML:

这是我的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:

这是我的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.

应该很简单，但没有雪茄。

3 个解决方案

#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

小提琴

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

您需要为zip输入元素设置事件处理程序。 $（'＃zip'）。val（...）;仅在执行该行时设置一次值。
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.

您需要更好地选择该选项。 $（“＃location option [value ='In Range']”）。show（）;不会显示您想要的选项。您必须将选择器输入的值设置为与所需选项匹配的值。

Change your javascript to this:

将您的javascript更改为：

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

请注意，我正在使用$（'＃zip'）。on（'blur'，...）;注册一个事件处理程序，将其设置为blur事件并传入一个函数，以便在该事件触发时执行。

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

然后我将位置选择器输入的值设置为您要选择的选项的正确值。

DEMO

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

on函数绑定事件侦听该Element。 keyup事件侦听在您的字段内释放密钥的时间。然后，您可以将值与之前的值进行比较，并根据需要显示/隐藏。

#1