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

Hide select options depending on value of another select

本文关键字：选择 隐藏 选项 另一个      更新时间：2023-09-26

这里几乎没有类似的问题，但都不适合我。

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

Fiddle Here:http://jsfiddle.net/pz9cjmLg/4/

如果我没有记错的话，只有Firefox支持隐藏个人<选项>s。我认为你需要删除你不想显示的选项。

尝试

$(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());
}

演示

相关文章：