解决: 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/
这将显示与隐藏的下拉列表最接近的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 += ''; _op[$(this).text()] = $(this); // Monthly Release,Title,New Provider/Show Name }); $("#selopt").change(function() { _op[$(this).val()].closest('div:hidden').show(); });
如果标签的文本具有特殊字符,则可能会出现意外结果。 在这种情况下,我们可以更多地修改我们的数组,但仍然可以。
以上就是jQuery教程分享Jquery – 查找匹配的选定选项和标签以显示相应的字段相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/561657.html