根据另一个选择的值隐藏选择选项答案

【问题标题】：Hide select options depending on value of another select根据另一个选择的值隐藏选择选项
【发布时间】：2014-10-17 13:08:41
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery css

【解决方案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)

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

【讨论】：

【解决方案2】：

如果我没记错的话，只有 Firefox 支持隐藏单个

【讨论】：

幸运的是，Firefox 是我们唯一支持的浏览器。

【解决方案3】：

试试

$(document).ready(function () {
    $(".CompType").change(function () {
        filterInstitution(this)
    });
});

function filterInstitution(elem) {

    var value = elem.value;
    var options = $(".CompName option");
    options.hide();
    var op = options.filter(function () {
        return value == $(this).val().slice(0, 1);
    }).show();

    $(".CompName").val(op.eq(0).val());

}

DEMO

【讨论】：