Jquery – 查找匹配的选定选项和标签以显示相应的字段

解决： http ： //jsfiddle.net/arkjoseph/swDy5/20/

目标是创建一个亚马逊风格的搜索框，它将减少一页上多个输入搜索/过滤字段所需的空间量。

搜索流程：

从搜索表单中获取标签。
将标签附加到选择选项字段。

在选择更改时，获取所选值。

如果选择的val与标签匹配，则显示最接近的div.input，div.option （这是一切都出错的地方。由于我正在搜索数组，我认为我无法找到标签附近最近的隐藏容器。有什么提示吗？ ）

到目前为止，我已将新的选择值传递给数组，并尝试在更改时找到匹配项。

$("body").append(""); var _op = []; var _se = ""; $(".views-exposed-widget label").each(function(){ var text = $(this).text(); _se += ''+ text +''; _op.push($(this).text()); // Monthly Release,Title,New Provider/Show Name }); $("#selopt").change(function() { $("form .views-exposed-widget .views-widget").fadeOut(); _op[$(this).val()].next('div').css("z-index","100").fadeIn(); }); 

更新了Jquery： http ： //jsfiddle.net/arkjoseph/swDy5/14/

Answer 1

这将显示与隐藏的下拉列表最接近的div。

 $("#selopt").change(function() { $(this).closest('div:hidden').show(); }); 

更新

根据您的评论，这应该让你接近。 我们可以为实际标签创建文本字典，而不是将文本推送到数组中。 然后当选择更改时使用标签找到最接近的div。 像这样：

 $("body").append(""); var _op = {}; var _se = ""; $(".views-exposed-widget label").each(function(){ var text = $(this).text(); _se += ''+ text +''; _op[$(this).text()] = $(this); // Monthly Release,Title,New Provider/Show Name }); $("#selopt").change(function() { _op[$(this).val()].closest('div:hidden').show(); }); 

如果标签的文本具有特殊字符，则可能会出现意外结果。 在这种情况下，我们可以更多地修改我们的数组，但仍然可以。