一旦我的標籤上點擊選擇按鈕應該得到開放

Question

我想打開選擇按鈕，如果我的標籤上單擊，

這裏是代碼

<label>sachin</label> 
<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

有在CSS或jQuery的什麼辦法？我不確定這件事。

小提琴：http://jsfiddle.net/Yh3Jf/

Answer 1

你想要做這樣的事？ http://jsfiddle.net/Yh3Jf/6/

<label id="l">sachin</label> 
    <select id="s"> 
     <option>1</option> 
     <option>2</option>   
     <option>3</option> 
     <option>4</option> 
    </select> 

$("#l").click(function() { 
    var size = $('#s option').size(); 
    if (size != $("#s").prop('size')) { 
     $("#s").prop('size', size); 
    } else { 
     $("#s").prop('size', 1); 
    } 
}) 

Answer 2

不幸的是，研究所可以使用任何類型的代碼有本地選擇下拉列表顯示出來。

但我看到有人用backgrond圖像，然後選擇彈出，（檢查Mightydeals.com）

如果不解決對jQuery和一些HTML產生的效果。

Answer 3

如果你只是想獲得重點選擇框（從而使您能夠箭頭向上和向下），你可以使用類似...

<label for="sel">sachin</label> 
<select id="sel"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
</select> 

Answer 4

錯的傢伙;獲得本機選擇列表只是讓鼠標在一個看不見的克隆：

$("label").mouseover(function(){ 
    var $this = $(this); 
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) { 
     var $clon = $input.clone(); 
     var getRules = function($ele){ return { 
      position: 'absolute', 
      left: $ele.offset().left, 
      top: $ele.offset().top, 
      width: $ele.outerWidth(), 
      height: $ele.outerHeight(), 
      opacity: 0, 
      margin: 0, 
      padding: 0 
     };}; 
     var rules = getRules($this); 
     $clon.css(rules); 
     $clon.on("mousedown.lf", function(){ 
      $clon.css({ 
       marginLeft: $input.offset().left - rules.left, 
       marginTop: $input.offset().top - rules.top, 
      }); 
      $clon.on('change blur', function(){ 
       $input.val($clon.val()).show(); 
       $clon.remove(); 
      }); 
      $clon.off('.lf'); 
     }); 
     $clon.on("mouseout.lf", function(){ 
      $(this).remove(); 
     }); 
     $clon.prop({id:'',className:'lfClon'}); 
     $clon.appendTo('body'); 
    } 
}); 

在測試了IE10，Chrome瀏覽器27和Firefox 22

演示：http://jsfiddle.net/Yh3Jf/24/