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!

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!

• javascript
• jquery
• html
• css

• 1 Native html elements are not very well suited for such detailed control. Take a look at jquery ui extensions like "chosen". They offer far more features than stock elements and typically look better too... – arkascha Commented Mar 29, 2015 at 14:54
• @1sand0s I thought the question was clear enough given the OP isn't a native english speaker, stop worrying about the points and think of your time spent helping the OP as time getting him closer to his goal. SO points are secondary to that. – webnoob Commented Mar 29, 2015 at 18:32

5 Answers 5

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/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()

Try this:

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

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"

You should use click event on select

$('select').on('click',function(){
    $(this).attr('size',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