Question

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

我需要一种有效的方法来过滤选择中的选项，具体取决于另一个选择中的选定值。首先选择包含具有简单数值1,2,3的选项...第二个应该被过滤，包括＆＃39;组＆＃39;中的选项。选项的值为数百，即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)

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

Answer 2

如果我没弄错，只有Firefox支持隐藏单个＆lt; option＆gt; s。我认为您需要删除您不想展示的选项。

Answer 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());

}

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

3 个答案:

DEMO