Question

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

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

radio-button1, radio-button2

option1,
option2,
option3,
option4,
option5,
option6,

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

目前我只使用show / hide功能和2个单独的下拉列表来执行此操作..但我想知道如何在1个下拉列表中执行此操作。任何建议都会受到赞赏。

Answer 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按钮radio的大小写应与value个select选项的{{1}}匹配

希望这会对你有所帮助。

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

这对你有用;希望它有所帮助

Answer 3

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

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

3 个答案: