Once i click on label select button should get open
Do you want to do something like this? 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);
}
})
No need for javascript here, just style it with CSS and use pointer events :
<label>
<select>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
</label>
and the 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 a ugly fiddle sample: https://jsfiddle.net/1rofzz89/
Wrong guys; to get the native selection-list just make a 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/