HTML select trigger by a div or an image

Question

I have a <select> menu similar to example 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've seen that this menu can be triggered via an external image or div.

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

How can I trigger this select menu via a click to another DOM element, i.e., a div?

PS. My website already has jQuery included.

You can't unless you use some custom selectbox made of `divs` and etc. — dfsq, Feb 16 '13 at 12:08
@dfsq, that's not really correct. Many webpages use this kind of "skinning". — Phil, Feb 16 '13 at 12:10
I don't think it be possible, those websites probably are using a custom made menu look similar to original one. like this one https://github.com/claviska/jquery-selectBox — Yousef Salimpour, Feb 16 '13 at 12:10
If you want to open dropdown options programmatically than the answer - no, you will not be able to do it, unless you create select box with divs for example. — dfsq, Feb 16 '13 at 12:13
@Youself, that's possible as well, I suppopse. I need this for a mobile website. To allow "full screen" selection list to appear like on Google translate's mobile version. What would you suggest for this? A div triggered, not-space-crammed select-list like option? Thank you! — Phil, Feb 16 '13 at 12:24
You can easily do this: http://jsbin.com/azirup/1 but if you need the list of options to appear - it is impossible http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — core1024, Feb 16 '13 at 12:44

score 2 · Answer 1 · answered Apr 14 '14 at 20:59

Here I coded a script on JSFiddle to easily select different options from a dropdown by using external divs.

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

Based on this script, you could increment a lot the functionalities by adding for example urls to each option (ex: data-link="http://google.com") and window.location it on change, or anything you want to.

Anyway if you want a really kick-ass plugin to make it automatically I propose the msDropdown (Documentation here).

This plugin ables you to create custom selects with images, descriptions and many other features by simple bind them with a select tag or with json information. Hope is what you were looking for.

score 0 · Answer 2 · answered Feb 16 '13 at 23:15

When you say "I want select menu to appear", I'm assuming you want to select a particular value in the dropdown/select list, when the user clicks on a particular div is clicked.

First thing you need to do is give an ID to the select tag (say "dropdownList"), and to every option in the list (say "option1", "option2", "option3", "option4"). Say there are 4 different div's (say "div1", "div2", "div3", "div4"), which when clicked select a different value in the dropdown list. You can do this -

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

You can always optimize it by wrapping the 4 div's in one master div called "masterDiv", and then -

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

Hope this helps.

simply-put · Answer 3 · 2013-02-16T12:31:03.510

-1

This is an example button will also trigger select by the use of jquery trigger function

 <!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>

edited Feb 16 '13 at 12:31

answered Feb 16 '13 at 12:11

simply-put

1,068
1
11
20

In addition, the OP's question is in relation to `select` elements being triggered, which behave differently than `button` elements. For instance, you cannot simply call `.trigger('click')` on selects and have them open. ([example](http://jsfiddle.net/XccPC/1/)) – Ruben Infante Feb 16 '13 at 12:18
@RubenInfante, Now above one is working example of trigger event for select tag – simply-put Feb 16 '13 at 12:31
@wisdom The OP is trying to programmatically open the `select` control such that the options are visible (what would normally happen if you clicked on it). Triggering `change` does not address that issue. – Ruben Infante Feb 16 '13 at 12:36
@RubenInfante, sorry my bad – simply-put Feb 16 '13 at 12:50

score -2 · Answer 4 · answered Feb 16 '13 at 12:08

-2

The .change jQuery event will detect if the value of the select field has changed then you can do a jQuery action to show your image.

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

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

answered Feb 16 '13 at 12:08

Michael Merrill

58
3

I do NOT want to show any images. I want a select menu to appear when a div or an image is clicked. – Phil Feb 16 '13 at 12:09

HTML select trigger by a div or an image

4 Answers4