如何改变“;尺寸“;单击选择时的选择

How to change "size" of select when click on select?

本文关键字：选择 单击 何改变 尺寸 改变      更新时间：2023-09-26

很抱歉我英语不好，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>

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

编辑将来，表单可能会有更多的250个选项，因此当文档加载大小为1时，以及当我单击大小为5…时，这一点非常重要。。。。仅当选择显示选项时，大小必须为"5"，当选择选项时，尺寸必须为1。

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

你能帮我吗？

谢谢！

以下是您的问题的有效解决方案：

  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进行以下操作：

.change（）

.focus（）

.attr（param1，param2）

.blur（）

.position（）

试试这个：

<select size="1" 
    onfocus='this.size=5;' 
    onblur='this.size=1;' 
    onchange='this.size=1; this.blur();'
>

如果您想在javascript级别声明事件处理程序，请使用HTML select标记中的HTML onclick="myFunction（）"事件标记，或者使用jQuery click（）处理程序（我的意思是，如果您想从javascript添加附加事件）。我的意思是，您可以选择在HTML标记源代码中添加额外的事件调度代码，或者从javascript/jQuery级别添加它。

问题是onChange()事件调度直到太晚才被调用以满足您的需要（它在用户选择值后被调用）。

您需要在单击下拉菜单的按钮时得到通知，以便更改所选值（默认值）。

在您的点击函数处理程序中，更改selectedIndex属性，并将其设置为包含"5"的行的索引

您应该在选择时使用点击事件

$('select').on('click',function(){
    $(this).attr('size',5) 
});

只需使用javascript:

<select id='sel' onfocus='changesize();' onchange='changesize2();' 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>
<script>
function changesize(){
    document.getElementById('sel').size = '5';
}
function changesize2(){
    document.getElementById('sel').size = '1';  
    document.getElementById('sel').blur();
}
</script>

演示：http://codepen.io/anon/pen/zxbRZb

相关文章：