使用单选按钮jquery隐藏1个下拉列表中的项目答案

【问题标题】：Hide items within 1 dropdown list using radio buttons jquery使用单选按钮jquery隐藏1个下拉列表中的项目
【发布时间】：2012-02-14 11:38:39
【问题描述】：

基本上我想要做的是有 1 个下拉列表（包含所有选项），当我单击单选按钮时，它只显示下拉列表中的特定选项。

例如，我有 2 个单选按钮和 6 个选项：

单选按钮1，单选按钮2 选项1，选项2，选项3，选项4，选项5，选项6，

如果我按radio-button1，它只会在下拉列表中显示option1、option2、option3。如果我按radio-button2，它将显示其他 3。

目前我只使用显示/隐藏功能和 2 个单独的下拉列表来执行此操作.. 但我想知道如何在 1 个下拉列表中执行此操作。任何建议都将不胜感激。

【问题讨论】：

欢迎来到 SO。请完整阅读FAQ 部分。它将帮助您了解如何提出问题、如何接受答案、如何投票/否决问题/答案。

标签： jquery

【解决方案1】：

你可以查看这个 jsFiddle：http://jsfiddle.net/Chran/2/

HTML

<div>
<input type="radio" name="test" checked="checked" value="Apple" /> Apple<br />
<input type="radio" name="test" value="Orange" /> Orange

<br />
<select ID="DropDownList2" Height="18px" Width="187px">
    <option Value="Apple_Style_1">Apple Style 1</option>
    <option Value="Apple_Style_2">Apple Style 2</option>
    <option Value="Apple_Style_3">Apple Style 3</option>
    <option Value="Orange_Style_1">Orange Style 1</option>
    <option Value="Orange_Style_2">Orange Style 2</option>
    <option Value="Orange_Style_3">Orange Style 3</option>
</select>
</div>

JavaScript

var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
   var text = $(this).val();
   $("#DropDownList2").html(options);
   $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});

注意事项：

在执行此代码之前，您已经加载了 jQuery。
value for radio 按钮的大小写应与select 选项的value 匹配

希望对你有所帮助。

【讨论】：

非常感谢！正是我一直在寻找和完美工作的东西。

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function dropHider(type) {
            $("select#drop").find("option").each(function() {
                if ($(this).attr("rel") == type) {
                    $(this).removeAttr("disabled");
                } else {
                    $(this).attr("disabled","disabled");
                }
            });
        }
    </script>
</head>
<body>
    <input type="radio" name="type" value="Food" onClick="dropHider(this.value)"> Food<br />
    <input type="radio" name="type" value="Drink" onClick="dropHider(this.value)"> Drink<br />
    <select id="drop">
        <option rel="Food" value="Pizza" id="1">Pizza</option>
        <option rel="Food" value="Burger" id="2">Burger</option>
        <option rel="Food" value="Fish" id="3">Fish</option>
        <option rel="Drink" value="Coke" id="4">Coke</option>
        <option rel="Drink" value="Lemonade" id="5">Lemonade</option>
        <option rel="Drink" value="Fanta" id="6">Fanta</option>
    </select>
</body>
</html>

这应该适合你；希望对你有帮助

【讨论】：

【解决方案3】：

您只需为每个选项分配一个唯一的 ID，并在选择单选按钮时根据您想要执行的操作使用显示/隐藏。所有选项都可以在同一个列表中，您可以使用其 ID 显示/隐藏列表元素。

【讨论】：