一旦我的标签上点击选择按钮应该得到开放

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/