jQuery 如何在 onfocus() 上打开 HTML 选择标签的选项列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17943475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 20:14:34 来源:igfitidea点击:
How to open option list of HTML select tag on onfocus()
提问by Vijay
My HTML code looks like below.
我的 HTML 代码如下所示。
<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 selecttag on onfocus()events?
如何打开事件select标签的选项列表onfocus()？
采纳答案by Iren Patel
$(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);
});
});
回答by krishna
Here are the 2 javascript functions
这是 2 个 javascript 函数
function expand(obj)
{
obj.size = 5;
}
function unexpand(obj)
{
obj.size = 1;
}
then i create the select 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>
回答by Vijay
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>
回答by DevlshOne
HTML
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
jQuery
$('#demo2').on('focus',function() {
var optCount = $(this).children('options').length;
$(this).attr('size', optCount);
});
回答by Samuel Arroyo
in your code you can place this code select id = "demo2"with this code select id = "demo2" onfocus="myFunction(this) fore highlight your Option.
在您的代码中，您可以将此代码select id = "demo2"与此代码select id = "demo2" onfocus="myFunction(this) 前突出显示您的选项。
回答by KATJ Srinath
$(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>
