As soon as I press the shortcut button, you should open

Question

I want to open the select button, if I click on the label,

here is the code

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

Is there any way in css or jquery? I am not sure about that.

script: http://jsfiddle.net/Yh3Jf/

Answer 1

Do you want to do something like that? 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

There is no need for javascript here, just create it using CSS and use pointer events:

 <label> <select> <option value="0">Zero</option> <option value="1">One</option> </select> </label> 

and relative CSS is

 label:after { content:'\25BC'; display:inline-block; color:#000; background-color:#fff; margin-left:-17px; /* remove the damn :after space */ pointer-events:none; /* let the click pass trough */ } 

Here is an example of an ugly violin: https://jsfiddle.net/1rofzz89/

Answer 3

Wrong guys to get your own pick list, just make an invisible clone under the mouse:

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

Tested on IE10, Chrome 27 and Firefox 22

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

Answer 4

If you are just trying to focus on the selection window (this way you can shoot up and down), you can use something like ...

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

Answer 5

Unfortunately, it cannot use any code to display the native select dropdown.

But I saw people use backgrond images and then select pop-ups (check out Mightydeals.com)

If jquery and some html are not allowed to create an effect.