javascript - 根据另一个选择的值隐藏选择选项

Question

这里有几个类似的问题，但没有一个适合我。

我需要一种有效的方法来根据另一个选择中的选定值来过滤选择中的选项。第一个选择由具有简单数值 1,2,3 的选项组成......第二个应该被过滤，由“组”中的选项组成。选项的值以百为单位，即 102、103、202、254...

如果选择值为 1 的选项，则在第二次选择时，只有值以 1 开头的选项应该可见。每次用户选择一个选项时都会发生这种情况。

我已经试过这段代码，但它不起作用。

function filterInstitution(elem){
  var currRow = elem.closest("tr")
  var inType = elem.val();

  currRow.find(".CompName option").toggle(false);
  currRow.find(".CompName option").each(function(){
    $("[value^="+ inType + "]", $(this)).toggle(true);
  });
}

这是 Fiddle .它只包含几个选项，但实际上，第二个选择包含 80 多个选项。

我的想法是隐藏所有选项并仅显示以第一个选择中的选定数字开头的选项。我哪里出错了？

Answer 1

当你说

$("[value^="+ inType + "]", $(this))

您要告诉 jQuery 查找满足条件 "[value^="+ inType + "]" 的元素这也是 $(this) 的后代.您要做的是检查 $(this)符合条件。

这是一个不同的版本:

var currRow = elem.closest("tr")
var inType = elem.val();

currRow.find(".CompName option")
       .hide() //equivalent to .toggle(false)
       .filter("[value^="+ inType + "]") //this will do the filter you desire
       .show(); //equivalent to .toggle(true)

在这里 fiddle :http://jsfiddle.net/pz9cjmLg/4/