Question

我遇到了多重选择的问题。我想要做的唯一方法是使用多选，但我需要将其转换为单个下拉选择，因为这种方式是设计。

问题是：如何在单个选择中转换多个选择？我添加了一个截图：

我喜欢这样：

并且设计应该是这样的：

无论如何用html或css转换它而不删除multiple="multiple"属性？

我的标签： <select multiple="multiple" class="destination_s input input--select"></select>

此致

Answer 1

我看到的唯一方法是将看似HTML选项的div设置为样式并使用JavaScript显示并隐藏选择Multiple。这是我刚刚做的一个快速示例（可能代码可能更好）：

function showSelect(classname) {
            document.getElementById('sel').className = classname;
        }

.hidden {
            display: none;
        }

        .visible {
            display: block;
        }

        .div {
            border: 1px solid black;
            width: 100px;
        }

        #sel {
            width: 100%;
        }

        .arrow {
            float: right;
        }

<div class="div" onmouseover="showSelect('visible')" onmouseout="showSelect('hidden')">
         Choose... <span class="arrow">&#9660;</span>

        <select multiple="multiple" class="hidden" id="sel">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
        </select>
    </div>

同时考虑使用像Chosen这样的框架来使其更容易。

Answer 2

我明白了你的意思，但只有HTML / CSS的帮助才能实现。你需要在某些时候使用JS或jQuery。

请参阅以下插件，这些插件可能会帮助您进行整理。 http://wenzhixin.net.cn/p/multiple-select/docs/ https://www.jqueryscript.net/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html

您也可以使用Chosen，Select2插件。

将多个选择更改为单个选择下拉列表

2 个答案: