Select an HTML trigger using a div or image

Question

Select an HTML trigger using a div or image

I have a menu <select>like the one below:

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

On some websites, I saw that this menu can be launched using an external image or div.

I searched on google, but almost all the questions and answers are related to how to list images inside select , which is not what I need . I want the selection menu to appear when I press a DIV or image.

How can I call this selection menu by clicking on another DOM element, i.e. div?

PS. JQuery is already enabled on my website.

+5

javascript html css html5 css3

Phil Feb 16 '13 at 12:05

source share

4 answers

DD. · Answer 1 · 2014-04-14T20:59:02+0000

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

script, , , , URL- (: data-link = "http://google.com" ) window.location, , , .

, , , msdropdown ( ).

, , select json. - , .

Saad Ulde · Answer 2 · 2013-02-16T23:15:47+0000

" , ", , /, - div, .

, , select (, "dropdownList" ) (, "option1", "option2", "option3", "option4" ). , 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 div, "masterDiv", -

$("#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"); });

, .

simply-put · Answer 3 · 2013-02-16T12:11:55+0000

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>

Michael merrill · Answer 4 · 2013-02-16T12:08:46+0000

The .change jQuery event will determine if the value of the selection field has changed, and you can do a jQuery action to display your image.

You can use .click, but it will be messy. Best to use .change.

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

Select an HTML trigger using a div or image

More articles: