Question

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

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

搜索流程

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

选择更改，获取所选值。

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

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

    $("body").append("<select id='selopt'></select>");

var _op = [];
var _se = "";
$(".views-exposed-widget label").each(function(){
    var text = $(this).text();
    _se += '<option value="'+ text +'">'+ text +'</option>';
    _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("<select id='selopt'></select>");

var _op = {};
var _se = "";
$(".views-exposed-widget label").each(function(){
    var text = $(this).text();
    _se += '<option value="'+ text +'">'+ text +'</option>';
    _op[$(this).text()] = $(this);
    // Monthly Release,Title,New Provider/Show Name
});


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

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

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

1 个答案: