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？

）来触发此选择菜单

PS。我的网站已经包含了jQuery。

Answer 1

在这里，我使用外部div来编码script on JSFiddle以便从下拉列表中轻松选择不同的选项。

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
    });
});

基于此脚本，您可以通过添加例如每个选项的网址（例如：data-link =“http://google.com”）和window.location更改或任何内容来增加很多功能。你想要。

无论如何，如果你想要一个真正的kick-ass插件自动生成它我建议msDropdown（Documentation here）。

此插件可让您通过使用select标记或json信息简单地绑定它们来创建包含图像，描述和许多其他功能的自定义选择。希望就是你所寻找的。

Answer 2

当您说“我希望选择菜单出现”时，我假设您想要在用户点击特定div时点击下拉/选择列表中选择特定值。

您需要做的第一件事就是为select标签（比如“dropdownList”）和列表中的每个选项（比如“option1”，“option2”，“option3”，“option4”）提供一个ID。假设有4个不同的div（例如“div1”，“div2”，“div3”，“div4”），点击时在下拉列表中选择一个不同的值。你可以这样做 -

$("#div1").on("click",function(){$("dropdownList").val("option1");}); $("#div2").on("click",function(){$("dropdownList").val("option2");}); $("#div3").on("click",function(){$("dropdownList").val("option3");}); $("#div4").on("click",function(){$("dropdownList").val("option4");});

你总是可以通过将4个div包装在一个名为“masterDiv”的主div中来优化它，然后 -

$("#masterDiv div").on("click",function(e){ $("#dropdownList option:selected").removeAttr("selected"); \\remove currently selected value $("#option"+e.target.id.charAt(e.target.id.length-1)).attr("selected","selected"); });

希望这有帮助。

Answer 3

这是一个示例按钮，也会通过使用jquery触发器函数触发select

 <!DOCTYPE html>
    <html>
    <head>

    <style>

    button { margin:10px; }

    div { color:blue; font-weight:bold; }

    span { color:red; }

    </style>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>

    <body>

    <select id = "slt">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    <button id="btn">Button #2</button>

    <div><span>0</span> button #1 clicks.</div>

    <div><span>0</span> button #2 clicks.</div>

    <script>
 $("#slt").change(function () {

update($("span:first"));

});

$("button:last").click(function () {

$("#slt").trigger('change');

update($("span:last"));

});    
     function update(j) {

var n = parseInt(j.text(), 10);

j.text(n + 1);

}

    </script>

    </body>

    </html>

Answer 4

.change jQuery事件将检测select字段的值是否已更改，然后您可以执行jQuery操作来显示图像。

你可以使用.click，但它会变得混乱。最好用.change。

http://api.jquery.com/change/

HTML通过div或图像选择触发器

4 个答案: