php select control change layout

Question

I have a select control in my php web site i need to show it as a drop down list collapsed and i need to select multiple option, i use the folowing code

echo '<select class="form-control" multiple name="associate" >';
echo "<option value='0' class='form-control' >---Choose Associate---</option>"; 
foreach ($userarray as $key => $value)
{
    if (isset($_REQUEST['associate']))
    {
        echo "<option value='".$key."' class='form-control' >".$value."</option>"; 
    }
    else
    {
        echo "<option value='".$key."' class='form-control' >".$value."</option>";
    }
}
echo '</select>';

The problem is that the drop down look like this in the picture, i need to collapse it not to show it like this .. i dont need to see all the items!! just first one and when i click the others appears

Set the size to 1. Then when it's focused, dynamically change the size to more. When it loses focus, change the size back to 1. — dazed-and-confused, Oct 24 '20 at 21:51
Does this answer your question? [How to create checkbox inside dropdown?](https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown) — Steven, Oct 24 '20 at 22:03
but i prefer a solution to fix it not to change all the code, i think there is one! — Malo, Oct 24 '20 at 22:08
@Steven's solution is much more elegant but needs the extra CSS. Mine won't look as good as that one but it will be easier for you implement. — dazed-and-confused, Oct 24 '20 at 22:11
Just to point out, `if` and `else` both do the same thing. You probably want to add `selected` to the `if` — dazed-and-confused, Oct 24 '20 at 22:16

dazed-and-confused · Accepted Answer · 2020-10-24T22:04:44.983

1

Here's a sample of how you can do this:

<select multiple size="1" onfocus="show_more()" onblur="show_less()" id="my_select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<script>
function show_more()
{
    document.getElementById('my_select').size = 3;
}
function show_less()
{
    document.getElementById('my_select').size = 1;
}
</script>

View in jsFiddle https://jsfiddle.net/qodw5xe9/

Note: This can be done using a single function which accepts the size as a parameter. I broke it out to explicitly show what's going on.

edited Oct 24 '20 at 22:04

answered Oct 24 '20 at 21:45

dazed-and-confused

1,293
2
11
19

i need to select multiple option in my drop down – Malo Oct 24 '20 at 21:46

php select control change layout

1 Answers1