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

Question

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

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

这是我的jQuery：

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

}）;

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

Answer 1

您需要在此处更改两件事：

1. 您需要为zip输入元素设置事件处理程序。 $('#zip').val( ... ); 仅在执行该行时设置一次值。

2. 您需要更好地选择该选项。 $("#location option[value='In Range']").show(); 不会显示您想要的选项。 您必须将选择器输入的值设置为与所需选项匹配的值。

将您的javascript更改为：

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

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

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

DEMO

Answer 2

您应该使用以下方法监视值的变化：

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

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

Answer 3

隐藏选项不适用于浏览器，它与绑定事件到选项元素相同，您只能对它们进行非常有限的操作。 而是删除它们并缓存它们供以后使用。

$(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
        }

    });
});

小提琴