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

我有一个表单需要根据用户的ZIP在上面的数字字段中显示特定的选择选项（“位置”）。在这个例子中，我需要选项“超出范围”来隐藏和“In Range”，当用户在输入中输入“12345”时显示。基于输入值的jQuery显示/隐藏选项

这是我的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(); 
}

}）;

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

来源

2013-09-26 Andrew

隐藏选项元素不具备跨浏览器的支持......你需要将其删除 –

隐藏的选项将不跨浏览器工作，这是一样的约束力事件选项元素，你能做的只有非常有限的东西与他们。而是删除它们并将其缓存起来以备后用。

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

来源

2013-09-26 01:12:34 PSL

为什么这样做时，您可以通过将选择器的值设置为匹配选项值来选择所需的选项？例如。 '$（“＃location”）。val（“In Range”）;' –

@RickHanlonII请参阅OP。他想隐瞒他们。完全阅读问题。如果只是设置一个值，他甚至可能不会在这里问这个问题......非常简单直接的权利...... – PSL

@RickHanlonII是的，我需要用户仍然有能力从列表中选择一个。 :(我应该在这个例子中提到，让我试试PSL的...... – Andrew

您应该监视的价值，因为它改变了使用下面的方法：

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

的功能上结合事件收听该元素。 keyup事件监听密钥在您的字段内释放的时间。然后，您可以将该值与所需的值进行比较，并根据需要显示/隐藏。

来源

2013-09-26 00:57:15 Chausser

谢谢！我更新了我的代码以反映您的代码。。。但我仍然无法完成它的工作。：/ – Andrew

@Andrew这是因为你“展示”你想要的选择的方式。看到我的答案是正确的方式来做到这一点。 –

他是对的，我没有仔细看你的问题，以实现你的选择器在哪里。更新我的回答 – Chausser

有需要改变这里两件事情：

您需要一个事件处理程序设置为zip input元素。 $('#zip').val(...);仅在执行该行时设置值一次。
您需要更好地选择该选项。 $("#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

来源

2013-09-26 01:06:01

这真棒。感谢您的简洁！我一定会在以后使用它。但我需要隐藏它，以便用户仍然可以选择一个选项。对不起，我应该在例子中说清楚。。。 – Andrew

谢谢，我误解了你的意思是'隐藏'。 –

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

回答

相关问题