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?

Answer 1

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.