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

Question

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

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

radio-button1, radio-button2

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

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

目前我只使用显示/隐藏功能和 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。
• radio 按钮的 value 大小写应与 select 选项的 value 匹配

希望这对您有帮助。