使用單選按鈕隱藏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

回答

相關問題