Question

这里我尝试根据#category选择获取值，当我选择男性或女性类别时，选择选项后应显示相关选项。我确实满足了我的要求但是当我尝试使用键盘访问它时（向下箭头）它显示了#subcategory的所有选项。这里是代码和小提琴。感谢非常感谢。

我的小提琴http://jsfiddle.net/JUGWU/

HTML：

<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
    <option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>

Jquery的：

  $(document).ready(function(){
$("#category").change(function() {
   var xyz = $("option:selected").attr("id");
     alert(xyz);


    if(xyz === "menu1"){
        $("#subcategory option").hide();
        $("#Clothing,#Footwear").show();

   }
 });
});

Answer 1

在条件中尝试此操作。 disabled属性不允许键盘选择。似乎对我有用。

$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();

此外，如果用户从男性切换到女性，您的逻辑就会中断。

Answer 2

这个答案并不完全解决你的问题（使用键盘（向下箭头）），但我认为这是恕我直言，更好的方式来做你想要的。而且我使用@ user2301903答案中的固定部分，只是为了说明我的观点。我的主要观点是使用标记属性。

我们可以使用我们的标记属性来降低复杂性，我更改了这样的标记（添加了catg属性）：

<select id="category" name="category">
    <option>-select-</option>
    <option value="MEN" id="menu1" catg="m">MEN</option>
    <option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
    <option></option>
    <option id="Clothing" value="Clothing" catg="m">Clothing</option>
    <option id="Accessories" value="Accessories" catg="w">Accessories</option>
    <option id="Footwear" value="Footwear" catg="m">Footwear</option>
    <option id="Watches" value="Watches" catg="w">Watches</option>
    <option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
    <option id="Bags" value="Bags" catg="w">Bags</option>
</select>

和您的代码如下：

$(document).ready(function () {
    $("#category").change(function () {
        var catg = $("option:selected").attr("catg");

        //from @user2301903 answer
        $("#subcategory option").prop('disabled', true).hide();
        $("option[catg=" + catg + "]").prop('disabled', false).show();
    });
});

这是你的工作DEMO;

这是另一种做你想做的事情，即使在IE中也是如此：IE_DEMO

Answer 3

更改此行：

if(xyz === "menu1"){

为：

if(xyz == "menu1"){

嗯，它适用于chrome。记住，这是JavaScript，而不是PHP在这种情况下有所作为。

通常，您无法在某些浏览器中隐藏选项。我遇到了解决方案，在IE中禁用它们并将它们隐藏在Chrome中，试试吧。

使用jquery选择选项失败？

3 个答案: