How to open a list of HTML select tag options in onfocus ()

Question

How to open a list of HTML select tag options in onfocus ()

My HTML code is 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 to open a list of select tag options on onfocus() events?

+6

javascript jquery html javascript-events html-select

Vijay Jul 30 '13 at 9:40

source share

6 answers

Here are 2 javascript functions

 function expand(obj) { obj.size = 5; } function unexpand(obj) { obj.size = 1; }

then I create a selection box

 <select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)"> <option >option1</option> <option >option2</option> <option >option3</option> <option >option4</option> <option >option5</option> </select>

+2

krishna Jul 30 '13 at 12:32

source share

HTML

  <select id = "demo2"> <option disabled="true" selected="true" 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>

JQuery

 $('#demo2').on('focus',function() { var optCount = $(this).children('options').length; $(this).attr('size', optCount); });

jsFiddle Demo

+1

Devlshone Jul 30 '13 at 9:59

source share

Full code for requirements like this question .. for reference purposes.

 <!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

+1

Vijay Aug 3 '13 at 12:11

source share

in the code you can put this code select id = "demo2" using this code select id = "demo2" onfocus = "myFunction (this) Option.

-1

Samuel arroyo Jul 30 '13 at 9:52

source share

 $(document).ready(function(e) { $('#selectBox').focus(function() { $(this).attr('size',4); $(this).css('position',"absolute"); $(this).css('x-index',"1000"); }); $('#selectBox').blur(function() { $(this).attr('size',1); $(this).css('position',"relative"); $(this).css('x-index',"0"); }); $('#selectBox2').focus(function() { $(this).attr('size',4); $(this).css('position',"absolute"); $(this).css('x-index',"1000"); }); $('#selectBox2').blur(function() { $(this).attr('size',1); $(this).css('position',"relative"); $(this).css('x-index',"0"); }); });

 <div class="container" style="border:1px solid #00C;"> <div class="row"> <input type="text" placeholder="name" /> <input type="text" placeholder="add" /> <input type="text" placeholder="city" id="city" /> <input type="text" placeholder="tel" /> <input type="text" placeholder="home" /> <input type="text" placeholder="cun" id="cun" /> <br /> <select id="selectBox"> <option value="1" >1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <br /> <br /> <br /> <select id="selectBox2"> <option value="1" >1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div>

>

CLECK TO SEE JS FIDDLE

-2

Thamindu janaka May 09 '15 at 17:13

source share

Iren Patel · Accepted Answer · 2013-07-30T12:20:50+0000

 $(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 a demo

How to open a list of HTML select tag options in onfocus ()

More articles: