通过下拉列表隐藏行

时间:2009-11-05 11:34:33

标签: jquery

我有这个奇怪的问题,通过jQuery和下拉列表隐藏/显示表的行。而不是基于过滤器回发数据我只想隐藏与下拉列表中选择的内容无关的数据。这是片段:

$().ready(function() {
  $("#SupplierID").change(changeme);
  $("#BusinessID").change(changeme);
});

function changeme() {
  $("table tr").show();
  $("table tr td:nth-child(2):not(:contains('" + $("#SupplierID :selected").text() + "'))").parent().hide();
  $("table tr td:nth-child(6):not(:contains('" + $("#BusinessID :selected").text() + "'))").parent().hide();
  return false;
}

问题在于SupplierID工作正常,但BusinessID仅在选择了SupplierID后才能使用,而不是之前。如果我进入页面并立即从下拉列表中选择BusinessID,则没有任何反应。我 首先更改SupplierID下拉列表,以使其正常工作。此外,如果SupplierID设置为“全部”选项(空白值),则BusinessID下拉列表不起作用。

有什么想法吗?

修改

确实这是一个错误,因为没有价值的东西。问题是,这就是我现在必须拥有的:

$(function() {
  $("#SupplierID, #BusinessID").change(changeme);
});

function changeme() {
  $("table tr").show();
  if ($("#SupplierID :selected").val()) {
    $("table tr td:nth-child(2):not(:contains('" + $("#SupplierID :selected").text() + "'))").parent().hide();
  }

  if ($("#BusinessID :selected").val()) {
    $("table tr td:nth-child(6):not(:contains('" + $("#BusinessID :selected").text() + "'))").parent().hide();
  }
}

这看起来有点令人讨厌。关于如何使这更优雅的任何建议?

1 个答案:

答案 0 :(得分:1)

您是否检查过浏览器错误控制台?如果不这样做。

我猜你的changeme方法中的第二个语句会抛出错误,除非你选择了一个SupplierID。

没有选择供应商的选择器最终会解析为此我猜这可能会失败,因为您没有选择任何可以调用.parent().hide()的内容。 (轻松测试开关第二和第三行并测试行为是否也会切换)。

$("table tr td:nth-child(2):not(:contains(''))").parent().hide();

或者它已经引发了

$("#SupplierID :selected").text()

也没有选择任何内容,text()可能会失败。

在没有测试的情况下快速查看提供源即可随意猜测。或者代码中的其他内容失败。