如何在onfocus()事件中打开HTML select标签的选项列表

Question

如何在onfocus()事件中打开HTML select标签的选项列表

javascripthtmljqueryhtml-selectjquery-events

8

我的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>

如何在 onfocus () 事件中打开 select 标记的选项列表？

- Vijay

3

选项列表的交互机制由浏览器和/或操作系统控制，无法从Javascript中进行控制。如果想要更多控制权，可以使用CSS菜单替换<select>标签，例如使用Select2这样的插件。 - Barmar

1

@Barmar 请您提供有关 Select2 的任何链接或示例，谢谢。 - Vijay

我非常同意@Barmar。 - Anurag-Sharma

1

http://ivaynberg.github.io/select2/ - Barmar

@Barmar FYI，这不是一个罕见的请求。应该有一种方法来实现这个功能。在其他框架中，“myList.open（）”是典型的。标记@W3C。 - 1.21 gigawatts

@1.21千瓦时下面的答案展示了如何实现。虽然这似乎是一个奇怪的请求，因为在大多数浏览器中，单击菜单通常会打开它。 - Barmar

5个回答

1

为了参考目的，提供符合此问题要求的完整代码。

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

查找 jsFiddle

- Vijay

0

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演示

- DevlshOne

@DevlshOne，你的演示有问题... jsFiddle无法正常工作。 - Vijay

-1

在您的代码中，您可以将此代码 select id = "demo2"替换为此代码 select id = "demo2" onfocus="myFunction(this)"，以突出显示您的选项。

- Samuel Arroyo

并在头部添加样式代码 <script> function myFunction(x) { x.style.background="yellow"; } </script> - Samuel Arroyo

被踩负评了 - OP 在哪里提到要高亮显示或更改 select 语句的背景颜色？ - DevlshOne

-2

<div data-lang="js" data-hide="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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>

点击查看 JS FIDDLE

- KATJ Srinath

按下 Tab 键遍历元素，请确保已将 JQuery 库导入到 HTML。 - KATJ Srinath

- Iren Patel · Accepted Answer

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

演示示例链接