单击选择时如何更改选择的“大小”？

Question

抱歉我的英语不好，我有一个问题select：

<form name="reg" style="width:700px;" action="#" method="post">
 <p align="center"> 
    <select onChange="reg(this.options[this.selectedIndex].value)" size="1">
        <option selected value="250">Select the Reg</option> 
        <option value="0">Reg 1</option>
        <option value="1">Reg 2</option>
        <option value="2">Reg 3</option>
        <option value="3">Reg 4</option>
        <option value="4">Reg 5</option>
        <option value="5">Reg 6</option>
        <option value="6">Reg 7</option>
        <option value="7">Reg 8</option>
        <option value="8">Reg 9</option>
        <option value="9">Reg 10</option>   
    </select>        
 </p>   
</form> 

我希望当我单击选择时，选择的大小会发生变化size="5"，因为当文档加载时，大小是size="1"（这很好），但如果我单击选择，它会显示所有十个选项，这就是问题。 ..虽然，如果我点击选择，大小会改变，是最漂亮的。

编辑 将来该表单可能有更多 250 个选项，因此重要的是，当文档加载大小为1时，当我单击大小为5 .... 仅当选择显示选项时，大小必须为“5”，并且当选择一个选项时，大小必须为 1。

问题是我不知道怎么做到的，也许是用jquery？还是只用CSS？

你能帮助我吗？

谢谢！

Answer 1

这是针对您的问题的有效解决方案：

1. 将焦点事件处理程序添加到 id='selRegs' 的选择列表
2. 将 size 属性设置为 6（5 将显示 4 个选项 + “Select the Reg”选项）
3. 选项更改后大小将重置为 1
4. 从选择中移除焦点

https://jsfiddle.net/juaxo8zm/8/

$(document).ready(function () {
                var initPos = $("#yourDiv").position();
                console.log("init: ");
                console.log(initPos);
                $('#selRegs').focus(function () {
                    $('#selRegs').attr("size", "6");

                    $("#yourDiv").css({
                        position: "absolute",
                        top: initPos.top,
                        left: initPos.left
                    });                    
                });
                $('#selRegs').change(function () {
                    console.log("selected");

                    $('#selRegs').attr("size", "1");

                    $("#selRegs").blur();

                    $("#yourDiv").css({
                        position: "static"
                    });
                });
            });

我为此使用 jQuery：

。改变（）

。重点（）

.attr(参数1, 参数2)

。模糊（）

。位置（）