如何在下拉列表中应用列表filter

 
 
  Select answer Yes No NA  
 
  Select answer Yes No NA  
 
  

这是我的jquery代码..

 $('#a').live('change',function() { Data=$(this).find("option:selected").text(); if(Data == "Yes") { $('#b').find("option[value='1']").show(); $('#b').find("option[value='2']").hide(); $('#b').find("option[value='3']").hide(); } if(Data == "No") { $('#b').find("option[value='3']").hide(); $('#b').find("option[value='1']").show(); $('#b').find("option[value='2']").hide(); } if(Data == "NA") { $('#b').find("option[value='1']").hide(); $('#b').find("option[value='2']").hide(); $('#b').find("option[value='3']").show(); } }); 

我的要求是在第一个下拉列表中仅显示所选项目…

Answer 1

您已经分配了名为Dat的变量，然后使用if(Data == "Yes")检查它的值

在这种情况下，通过使用switch语句，根本不容易分配变量

 $('#a').live('change',function() { switch($(this).find("option:selected").text()) { case "Yes": $('#b').find("option[value='1']").show(); $('#b').find("option[value='2']").hide(); $('#b').find("option[value='3']").hide(); break; case "No": $('#b').find("option[value='3']").hide(); $('#b').find("option[value='1']").show(); $('#b').find("option[value='2']").hide(); break; case "NA": $('#b').find("option[value='1']").hide(); $('#b').find("option[value='2']").hide(); $('#b').find("option[value='3']").show(); } }); 

Answer 2

其他答案是对的，你输入了“Dat”而不是“Data”。 我会建议像：

  var optionStates = { 'Yes': '1', 'No': '1', 'NA': '3' }; Data=$(this).find("option:selected").text(); $('#b') .find("option[value='" + optionStates[Data] + "']") .show() .siblings(':not([value=""])') .hide(); }); 

这大大减少了数据重复，我认为可以更容易地看到正在发生的事情。 您可以通过更改optionState定义中的值来控制显示哪个选项。 它目前仅支持显示一个项目，根据您的示例，但扩展它以允许多个项目不会是一个巨大的延伸。 （关于拼写错误，我怀疑你想要’不’：’1’实际上是’否”2’。

至少你应该利用链接并将引用存储到下拉列表的子节点，而不是每次都执行.find（）。

这里的例子 ： jsbin例子