5

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

4

4 回答 4

2

在这里，我在 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（此处的文档）。

这个插件可以让您通过简单地将它们与选择标签或 json 信息绑定来创建带有图像、描述和许多其他功能的自定义选择。希望就是你所寻找的。

于 2014-04-14T20:59:02.790 回答
0

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

您需要做的第一件事是为选择标签（例如“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"); });

希望这可以帮助。

于 2013-02-16T23:15:47.157 回答
-1

这是一个示例按钮也将通过使用 jquery 触发功能触发选择

 <!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>
于 2013-02-16T12:11:55.290 回答
-2

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

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

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

于 2013-02-16T12:08:46.040 回答