1

已解决：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/

4

1 回答 1

1

This will show the closest div to the dropdown that is also hidden.

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

Update

Based on your comment this should get you close. Instead of pushing the text into an array, we can create a dictionary of the text to the actual label. Then when the selection changes use the label to find the closest div. Like so:

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

This may have unexpected results if the text of the labels have special characters. In which case we can modify our array a bit more, but still possible.

于 2013-07-31T22:04:53.640 回答