2012-10-28 2 views
3

이미지를 클릭하여 드롭 다운 메뉴를 열고 닫고 싶습니다. 아래는 내가 가지고있는 HTML입니다.jQuery : 이미지를 클릭하여 드롭 다운 메뉴를 열거 나 닫는 방법?

<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(); 
    }); 
}); 
+0

ⅰ) 것 '.' 클릭 기능 선택기에 누락되었습니다. ii) 개폐로 무엇을 의미합니까? –

+2

이 모양이 현재 가능하지 않습니다! – techfoobar

+0

Chosen을 사용하여이 솔루션을 확인하십시오. http://stackoverflow.com/questions/12622191/trigger-click-on-select-box-on-hover/ – Turcia

답변

2

편집 : 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/

+1

시도해 보셨습니까? – techfoobar

+0

확장 된 선택으로 편집하는 경우를 제외하고는이 기능이 작동하지 않습니다 – bukart

+0

@bukfixart 예, 편집 한 이유입니다. 필자는 비선형 형식의 탐색을 쉽게하기 위해 해킹을 사용했기 때문에 그것이 제대로 작동 할 것이라고 확신했습니다. 왜 당신은 항상 당신의 대답을 시험 해야하는 또 다른 이유. –

0

이 기본 선택 상자 할 수 없습니다. 선택 상자 또는 자체 생성 된 플러그인을 사용해 볼 수 있습니다. 종종 이벤트로 열거 나 닫을 수 있습니다.

아마이 방법

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