4

我有一个表单，需要根据用户的 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();
}

});

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

4

3 回答 3

2

您需要在这里更改两件事：

  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选择器输入的值设置为您要选择的选项的正确值。

演示

于 2013-09-26T01:06:01.953 回答
1

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

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

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

于 2013-09-26T00:57:15.800 回答
1

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

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

    });
});

小提琴

于 2013-09-26T01:12:34.407 回答