javascript - Is there a way to make a select box drop down by clicking a button - Stack Overflow

admin管理员组

文章数量:1425948

Using an HTML select drop down like so:

<select>
  <option>1</option>
  <option>2</option>
  <option>3</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.

Using an HTML select drop down like so:

<select>
  <option>1</option>
  <option>2</option>
  <option>3</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.

• javascript
• html

Share Improve this question Follow asked Nov 18, 2010 at 21:24 CorfroCorfro 2311 silver badge33 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

本文标签： javascriptIs there a way to make a select box drop down by clicking a buttonStack Overflow