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

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

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

 
radio-button1, radio-button2 

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

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

目前，我只是使用显示/隐藏功能和2个单独的下拉列表来做到这一点..但我想知道如何在1下拉列表中做到这一点。任何意见将不胜感激欢呼。

来源

2012-02-14 andrewtang

欢迎来到SO。请完整阅读[FAQ]（http://stackoverflow.com/faq）部分。它会帮助你理解如何提问，如何接受答案，提问/回答问题。 – 2012-02-14 12:05:05

您可以检查此的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之前，你装的exec用这个代码。
的value为radio按钮外壳应匹配select的value选项

希望这有助于你。

来源

2012-02-14 11:50:56

非常感谢！正是我在寻找和完美工作。 – andrewtang 2012-02-14 12:43:22

-1

你只需要为每个选项分配一个唯一的ID，并根据你想要做什么，当你选择无线电按钮时使用显示/隐藏。所有选项都可以在同一个列表中，并使用其ID显示/隐藏列表元素。

来源

2012-02-14 11:43:01 equero

选项不能用css隐藏，这是jquery用来隐藏的东西... – 2012-02-14 11:53:04

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

这应该适合你;希望它有帮助

来源

2012-02-14 12:09:08

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

回答

相关问题