将多选更改为单选下拉菜单

Question

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

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

• 我有这样的：

设计应该是这样的：

是否可以在不删除multiple="multiple" 属性的情况下使用 html 或 css 对其进行转换？

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

问候

Answer 1

我明白你的意思，但仅借助 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 插件。

Answer 2

我看到的唯一方法是对一个看起来像 HTML 选择的 div 进行样式化，并使用 JavaScript 显示和隐藏选择多个。这是我刚刚制作的一个简单示例（也许代码可以更好）：

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 这样的框架来简化它。