How to change “size” of select when click on select?

Question

sorry for my bad english, i have a problem with 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> 

I would like that when i click on select, the size of select changes in size="5" , because when the document load the size is size="1" (and this is good) but if i click on select, it shows all ten options, and this is the problem... While, if i click on select, the size changes, is most beautiful.

EDIT In future the form could have more 250 options, so is important that when the document load size is 1 , and when i click the size is 5 .... the size must be "5" only when the select show options, and when an option is selected the size must be 1.

The problem is that i don't know how made it, maybe with jquery? or only with css?

Can you help me?

Thanks!

Answer 1

Here is a working solution for your problem:

1. add focus event handler to the select list with id='selRegs'
2. set the size attribute to 6 (5 will show 4 options + the "Select the Reg" option)
3. after option is changed the size will be reset to 1
4. remove focus from select

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"
                    });
                });
            });

I use jQuery for this:

.change()

.focus()

.attr(param1, param2)

.blur()

.position()

Answer 2

Use the HTML onclick ="myFunction()" event tag from the HTML select tag, or use jQuery click() handler if you want to declare the event handler at the javascript level (I mean if you want add the additional event from javascript). I mean you have a choice - add the extra event dispatch code in the HTML tag source code or add it from the javascript/jQuery level.

The problem is that onChange() event dispatch doesn't get called until too late for your need (it gets called after a user selects a value).

You need to get notified the moment the button for the drop-down menu is clicked so you can change the selected value (default) value.

In your click function handler change the selectedIndex property and set it to the the index of the line that contains "5"

Answer 3

You should use click event on select

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

Answer 4

Try this:

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

Answer 5

Just use 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>

Demo : http://codepen.io/anon/pen/zxbRZb