Is there a way to make a select box drop down by clicking a button

Using an HTML select drop down like so:

<select>
  <option>1</option>
  <option>2</option>
  <option>3&l开发者_如何学Ct;/option>
</select>

Is there a way I can click a button somewhere else on the page and have the select box drop down showing the options? As if I were clicking on the select box itself.

---

No, not without using a custom drop-down select element.

jQuery has .click() but that will only execute any onclick event bound to the select element, not the native "click" event of the GUI element itself.

---

Gareth answer is the right one!

A possible alternative might be to change the size attribute of the select box, this would not make the select to appear but it would show it as a list box. Something like:

function showSelect()
{
   var sel = document.getElementById('test');
   sel.size = 3;
   return false;   
}

<select id="test" size="1"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
</select> 

<a href="#" onlclick="return showSelect();">show select list</a>

---

No. (sorry about that)

---

you can increase the size of the actual select area by doing this:

<select id="list1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<button type="button" onclick="expand()">Click Me!</button>

<script type="text/javascript">
function expand()
{
   document.getElementById("list1").size=3;
}
</script>

this isn't quite expanding the dropdown but rather showing more of it by increasing the height on the page, but it may still accomplish what you want.

---

Yes, however the solution is simpler than you think. Instead of writing java-script to provoke a focus, simply create your button and absolutely position the select element on top of it with an opacity of 0.001. This will allow you to trigger the select click the way the DOM intended.

For example see how zappos is doing it here.

This works! Try it!