我有一个 <select>
类似于以下示例的菜单:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
在某些网站上,我看到可以通过外部图像或 div 触发此菜单。
我在谷歌上搜索过,但几乎所有的问题和答案都与如何在选择中列出图像有关,这不是我需要的。我希望在单击 DIV 或图像时出现选择菜单。
如何通过单击另一个 DOM 元素(即 div)来触发此选择菜单?
附言。我的网站已经包含了 jQuery。
最佳答案
这里我编码了一个script on JSFiddle使用外部 div 轻松地从下拉列表中选择不同的选项。
HTML:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<nav>
<div data-value="volvo">volvo</div>
<div data-value="saab">saab</div>
<div data-value="mercedes">mercedes</div>
<div data-value="audi">audi</div>
</nav>
CSS:
select {
display:block;
margin:0 0 10px;
}
div {
padding:5px 10px;
margin:0 0 5px;
border:solid 1px #ccc;
background:#eee;
cursor:pointer;
}
JS:
$(document).ready(function(){
var select = $("select"),
value = "";
$("div").on("click",function(){
value = $(this).attr("data-value"); // Store the value of the clicked div
select.find('option[value="'+ value +'"]') // Match the option with the value we get before
.prop("selected",true) // Assign it selected attr
.end() // Go back to the select
.trigger("change"); // Trigger the change to see the change reflected on the select
});
});
基于此脚本,您可以通过向每个选项添加例如 url(例如:data-link="http://google.com")和 window.location 来增加很多功能。你想要。
无论如何,如果您想要一个真正强大的插件来自动生成它,我建议使用 msDropdown ( Documentation here)。
此插件使您能够通过简单地将它们与选择标签或 json 信息绑定(bind)来创建具有图像、描述和许多其他功能的自定义选择。 希望是您一直在寻找的东西。
关于javascript - HTML 选择由 div 或图像触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14910087/