Menu
My HTML code looks like below:
<select id = "demo2">
<option value = "---select---">---select---</option>
<option value = "1">Oranges</option>
<option value = "2">Apples</option>
<option value = "3">Pears</option>
<option value = "4">Kiwis</option>
<option value = "5">Bananas</option>
<option value = "6">Banansasas</option>
<option value = "7">Grapes</option>
</select>
How do I open the option list of the select tag on onfocus() events?
938
Select lists are created using a combination of the HTML <select> and <option> tags. Select lists can be nested inside a <form> element or they can stand alone. They can also be associated with a form via the form attribute of the <select> tag.
HTML <select> Tag. The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list. Note: The <select> tag is used in a form to receive user responses.
To change the selected option of an HTML select element with JavaScript, we can set the value property of the select element. to add the select element. document. getElementById("sel").
$(document).ready(function(){
$('select').focus(function(){
$(this).attr("size",$(this).attr("expandto"));
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo(50,0);
});
$('select').blur(function(){
$(this).attr("size",1);
var x = "select[tabindex='" + (parseInt($(this).attr('tabindex'),10) + 1) + "']";
$(x).fadeTo('fast',1.0);
});
});
Link for demo example
121
Complete code for requirement like this question..for reference purpose..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Auto-expand SELECT</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('select').focus(function () {
$(this).attr("size", $(this).attr("expandto"));
});
$('select').blur(function () {
$(this).attr("size", 1);
});
$('select option').click(function () {
$(this).parent().attr("size", 1);
$(this).parent().val(this.value);
});
$('select').live('keypress', function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
$(this).attr("size", 1);
}
});
});
</script>
<style type="text/css">
select{position:absolute}
.selectHolder{position:relative; height:45px}
h4{margin:10px 0;}
h5{margin:50px 0 0 0; text-align:center; font-weight:normal }
</style>
</head>
<body>
<div style="margin:30px auto; width:400px; border:1px #888 solid; padding:20px; background-color:#F8F4F0">
<h3 style="text-align:center">Tab In, To Open Select Box</h3><br/><br/>
<form>
<input style="width:230px" type="text" name="start" value="Start here then tab to next input" tabindex="1" /><br/><br/>
<h4>One to Seven</h4>
<div class="selectHolder">
<select class="select" size="1" expandto="7" tabindex="2">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
</select>
</div>
<h4>One to Ten</h4>
<div class="selectHolder" >
<select class="select" size="1" expandto="10" tabindex="3">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<h4>One to Four</h4>
<div class="selectHolder tab4">
<select class="select" size="1" expandto="4" tabindex="4">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<h4>One to Dog</h4>
<div class="selectHolder tab4">
<select class="select" size="1" expandto="5" tabindex="5">
<option value="1" selected="selected">One</option>
<option value="2">BAT</option>
<option value="3">BIRD</option>
<option value="4">CAT</option>
<option value="5">DOG</option>
</select>
</div>
</form>
</div>
</body>
</html>
Find jsFiddle
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With