Question

我需要在加载时显示最初展开的DropDown（HTML select元素），以便显示DropDown中的所有选项。我搜索了很多，但令人惊讶的是，我没有找到这样一个简单问题的答案。我正在使用带有jquery的ASP.NET MVC。

Answer 1

这是一个小混搭（需要调整和优化），但应该让你开始：

<div style="position:relative">
    <select style="position: absolute">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>

<script type="text/javascript">

$(document).ready(function() {
    $("select").one("focus", function() {
        this.size = this.options.length;
    }).one("click", function() {
        this.size = 1;
    }).one("blur", function() {
        this.size = this.options.length;
    }).focus();
});

</script>

Answer 2

您可以像这样编写 HTML

<html>
<select id="abc">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
    <option>option 5</option>
</select>

</html>

下面是 JAVASCRIPT 功能是否会自动扩展。

<script type="text/javascript">
    $(document).ready(function() {
        var dropdown = document.getElementById("abc");
        var event;
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('mousedown', true, true, window);
        dropdown.dispatchEvent(event);
    });
</script>

Answer 3

您可以使用HTML代码编写：

   <select size="3" name="test" id="test">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
   </select>

然后通过javascript设置一个计时器，在将select框大小属性更改为1之后。例如，在页面的末尾（在clsed body标签之前）放置此代码：

<script type="text/javascript">
   window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds
</script>

如何显示下拉列表自动展开，以便在页面加载时显示所有选项

3 个答案: