Po kliknięciu na przycisk wyboru etykiety powinien dostać otwarte

Question

chcę otworzyć przycisk wyboru jeśli kliknięciu na etykiecie,

Oto kod

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

jest jakiś sposób w css lub jQuery? nie jestem tego pewien.

skrzypce: http://jsfiddle.net/Yh3Jf/

Answer 1

Chcesz zrobić coś takiego ? 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

Niestety inst można wykorzystać każdy rodzaj kodu, aby mieć natywną wybierz rozwijaną pokazać.

ale widziałem ludzi używa obrazu backgrond a następnie wybierz wyskakuje (sprawdź Mightydeals.com)

Jeśli nie rozwiąże do jQuery i niektóre HTML do wytworzenia efektu.

Answer 3

Jeśli dopiero próbuje zdobyć ostrość na pole zaznaczania (co pozwoli Ci strzałka w górę iw dół), można użyć coś jak ...

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

Answer 4

Niewłaściwe chłopaki; aby uzyskać natywną wyboru-list po prostu zrobić niewidzialną klona pod mysz:

$("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'); 
    } 
}); 

testowany na IE10, Chrome 27 i Firefox 22

Demo: http://jsfiddle.net/Yh3Jf/24/