單擊選擇時如何更改選擇的“大小”？

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> 

我想當我單擊select時，select的大小將更改為size="5" ，因為在文檔加載時，大小為size="1" （這很好），但是如果我單擊select，它將顯示所有十個選項，這就是問題所在...而如果我單擊“選擇”，則大小會更改，這是最漂亮的。

編輯將來，表單可能會有250個以上的選項，因此重要的是，當文檔加載大小為1時 ，當我單擊大小為5 .... 僅當選擇顯示選項時，大小必須為“ 5”，並且選擇一個選項時，大小必須為1。

問題是我不知道怎么做，也許用jQuery？ 或僅使用CSS？

你能幫助我嗎？

謝謝！

Answer 1

這是您問題的可行解決方案：

1. 將焦點事件處理程序添加到id ='selRegs'的選擇列表中
2. 將大小屬性設置為6（5將顯示4個選項+“選擇注冊表”選項）
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（param1，param2）

。模糊（）

。位置（）

Answer 2

使用HTML select標記中的HTML onclick =“ myFunction（）”事件標記，或者如果您想在javascript級別聲明事件處理程序，則使用jQuery click（）處理程序（我的意思是如果您想從javascript中添加其他事件） 。 我的意思是您可以選擇-在HTML標記源代碼中添加額外的事件分發代碼，或者從javascript / jQuery級別添加它。

問題在於，直到滿足您的需求時才調用onChange()事件調度（ 在用戶選擇一個值之后調用）。

單擊下拉菜單的按鈕時，您需要獲得通知，以便可以更改所選值（默認值）。

在點擊函數處理程序中，更改selectedIndex屬性並將其設置為包含“ 5”的行的索引

Answer 3

您應該在選擇時使用點擊事件

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

Answer 4

嘗試這個：

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

Answer 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