jQuery-查找匹配的选定选项和标签以显示相应的字段 [英] Jquery - find matching selected option and label to display corresponding field

问题描述

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

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

Goal is to create an amazon style search box which will reduce the amount of space needed for multiple input search/filter fields all on one page.

搜索流程:

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

obtain labels from the search form.
append labels to a select option field.

选择更改后，获取所选值.

on select change, obtain selected value.

如果选择的val与标签匹配，则显示最接近的div.input，div.option (这是所有错误的地方.由于我正在搜索数组，因此我认为无法在附近找到最接近的隐藏容器标签.有什么提示吗?)

If selected val matches a label, display closest div.input,div.option (This is where it all goes wrong. Since im searching an array, i don't think i can locate the closest hidden container near the label. Any tips?)

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

So far, I have passed the new select values to an array and have attempted to find a match on change.

    $("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/

Updated Jquery: http://jsfiddle.net/arkjoseph/swDy5/14/

推荐答案

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

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

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

更新

根据您的评论，这应该使您接近.我们可以将文本创建为实际标签的字典，而不是将文本压入数组.然后选择更改时使用的标签找到最接近的股利.像这样:

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.

这篇关于jQuery-查找匹配的选定选项和标签以显示相应的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！