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

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

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

放射性按钮1，放射性按钮2选项1，选项2，选项3，选项4，选项5，选项6，

如果我按radio-button1，它将只在下拉列表中显示选项1、选项2和选项3。如果我按radio-button2，它将显示其他3。

目前，我只使用显示/隐藏功能和两个单独的下拉列表来完成这项工作。。但我想知道如何在一个下拉列表中完成。如有任何建议，欢迎欢呼。

您可以检查这个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
radio按钮的value外壳应与select选项的value匹配

希望这对你有帮助。

<!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>

这应该对你有用；希望它能帮助

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

相关内容

最新更新

热门标签：