php select 控件更改布局

Question

我的 php 网站中有一个 select 控件，我需要将其显示为折叠的下拉列表，并且我需要 select 多个选项，我使用以下方法代码

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>';

问题是下拉菜单在图片中看起来像这样，我需要折叠它而不是像这样显示它..我不需要看到所有项目！！只有第一个，当我点击其他人时出现

Answer 1

以下是您如何执行此操作的示例：

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

在 jsFiddle 中查看 https://jsfiddle.net/qodw5xe9/

注意：这可以使用接受大小作为参数的单个函数来完成。我将其分解以明确显示发生了什么。

php select 控件更改布局

php select control change layout

html

php

drop-down-menu