jquery - jQuery：如何通过单击图像打开/关闭下拉菜单？

Question

我想通过单击图像来打开和关闭下拉菜单。下面是我的html。

<a href="javascript:void(0);" class="select_button1"><img alt="" src="images/button.gif" /></a>
<select class="select1">
      <option name="test" value="" class="first">Select</option>
      <option name="test" value="" class="">Opt1</option>
      <option name="test" value="" class="">Opt2</option>
</select>

这是我尝试过但似乎不起作用的方法：

$(document).ready(function() {
  $('select_button1').click(function() {
   $('.select1').toggle();
  });
});

Answer 1

编辑：

正如 techfoobar 所提到的，显然这是不可能的。您可以做的是保持您的选择元素不断扩展并在点击时隐藏/显示它。

HTML：

<a href="javascript:void(0);" class="select_button1"><img alt="" src="images/button.gif" /></a>
<br/>
<select class="select1" size="5" style="display:none">        
    <option name="test" value="" class="first">Select</option>       
    <option name="test" value="" class="">Opt1</option>       
    <option name="test" value="" class="">Opt2</option>
</select>

JS：

$('.select_button1').click(function() {
    $('.select1').toggle();
});

http://jsfiddle.net/WYm4H/4/

Answer 2

这对于默认选择框是不可能的。您可以尝试使用用于选择框的插件或自行创建的插件。它们通常可以通过事件打开/关闭。

也许这将是一种方式

$('.select_button1').click(function() {
  var $select = $( '.select1' );
  var options = $select.children().size();
  var size = $select.attr( 'size' );
  $('.select1').attr('size', ( size != options ? options : 1 ) );
});