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

使用默认选择框无法进行此操作。您可以尝试使用selectbox的插件或自己创建的插件。它们通常可以通过事件打开/关闭。

也许这会是一种方式

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

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

2 个答案: