javascript - HTML 选择由 div 或图像触发

Question

我有一个 <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。

Answer 1

这里我编码了一个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)来创建具有图像、描述和许多其他功能的自定义选择。希望是您一直在寻找的东西。