没有 Jquery 或 Bootstrap 插件的多选下拉菜单（核心 Javascript）

Question

有人知道如何创建这样的多选下拉菜单吗？：

 <select name="city" id="mySelect"> <!-- <option value="select"> </option> --> <option value="banglore">Banglore</option> <option value="bhubaneswar">Bhubaneswar</option> <option value="patna">Patna</option> <option value="indore">Indore</option> </select>

Answer 1

您必须使用列表和复选框创建一个 div。 可以使用 CSS 中的 :focus-within 使它们可见。 据我所知，原生 HTML 中不存在多选 droptown

<div with focus-within>
<ul>
    <li><input type="checkbox" name="city" value="val1">Val1</li>
...
</li>
</div>

https://css-tricks.com/keeping-parent-visible-child-focus/这应该解释一下。 您也可以使用 CSS 删除列表中的点