How do you make a select dropdown with jQuery?

Question

So, I have the following HTML:

<div class="toolsIndexSelectContainer">
      <select id="Clients" class="toolsIndexSelect disableElement">
          <option>Item</option>         
          <option>Item 2</option> 
          <option>Item 3</option> 
      </select>
</div>

When I click on the surrounding div with class toolsIndexSelectContainer, I would like the select to dropdown and show the items inside. I have this jQuery:

$("div[class~='toolsIndexSelectContainer']").click(function () {
    $(this).children("select").focus();
});

But, focus() does not work. I tried click() and Chrome just blows up on me. Is there a way to do this?

No, You cannot do that on `select` element.. You cannot trigger to show the drop down options. — Selvakumar Arumugam, Feb 14 '13 at 19:40
possible duplicate of [Is it possible to use JS to open an HTML select to show it's option list?](http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — Adam, Feb 14 '13 at 19:41
http://stackoverflow.com/questions/1531882/custom-jquery-dropdown — samuelesque, Feb 14 '13 at 19:43

Selvakumar Arumugam · Accepted Answer · 2013-02-14T19:52:00.813

3

No, You cannot do that on select element.. You cannot trigger to show the drop down options.

Other option is to download a drop down plugin which basically simulates select features.

This ddSlick plugin seems to simulate select box property and also has a method to open the drop down options.

select You may use plugin's open method like $('#demoSetSelected').ddslick('open'); to open drop down options.

edited Feb 14 '13 at 19:52

answered Feb 14 '13 at 19:41

Selvakumar Arumugam

79,297
15
120
134

This is a bummer. I wanted add some rounded edges to the select. I've done it with textboxes. Oh well, it still looks good. – ScubaSteve Feb 14 '13 at 20:02

score 1 · Answer 2 · answered Feb 14 '13 at 19:45

1

you can use something like the jquery Combobox . to convert the select to a combobox. Otherwise this is not possible with a normal select element

answered Feb 14 '13 at 19:45

SNAG

2,011
2
23
43

score 1 · Answer 3 · answered Feb 14 '13 at 20:06

This is a bit of a hack, but seems to work:

$(".toolsIndexSelectContainer").click(function () {
    $(this).find("#Clients").focus();
});
$("#Clients").focus(function(){
    this.size=$(this).find('option').length;
}).blur(function(){
    this.size=1;
});

fiddle to practice on: http://jsfiddle.net/As93t/

How do you make a select dropdown with jQuery?

3 Answers3