Question

  <table>
  <tr>
  <td>
  <select class="dropdown" id="a">
  <option value="">Select answer</option>
  <option value="1" >Yes</option>
  <option value="2">No</option>
  <option value="3">N.A.</option>
  </select>
  </td>
  <td>
  <select class="dropdown" id="b">
  <option value="">Select answer</option>
  <option value="1" >Yes</option>
  <option value="2">No</option>
  <option value="3">N.A.</option>
  </select>
  </td>
  </tr>
  </table>

这是我的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 == "N.A.")
{
    $('#b').find("option[value='1']").hide();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").show();
}
});

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

Answer 1

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

  var optionStates = {
    'Yes': '1',
    'No': '1',
    'N.A.': '3'
  };

  Data=$(this).find("option:selected").text();

  $('#b')
      .find("option[value='" + optionStates[Data] + "']")
        .show()
        .siblings(':not([value=""])')
          .hide();
  });

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

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

此处示例：jsbin example

Answer 2

您已分配名为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 "N.A.":
    $('#b').find("option[value='1']").hide();
    $('#b').find("option[value='2']").hide();
    $('#b').find("option[value='3']").show();
}
});

如何在下拉列表中应用列表过滤器

2 个答案: