jQuery 根据输入值显示/隐藏选项

Question

我有一个表单，它需要根据用户的 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( ... ); 仅在执行该行时设置值 once。

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', ...); 到 register an event handler，将其设置为 blur event 并传入一个要在该事件触发时执行的函数。

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

DEMO

Answer 2

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

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

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

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

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