javascript - 隐藏选择选项取决于另一个选择的值

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

我需要一种有效的方法来根据另一个选择中的选定值来过滤选择中的选项。第一个选择由具有简单数字值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多个选项。

我的想法是隐藏所有选项，只显示从第一个选择中以所选编号开始的选项。我哪里做错了？

最佳答案

当你说

$("[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)

在这里提琴：http://jsfiddle.net/pz9cjmLg/4/