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

【问题标题】：Multiple Select Dropdown With No Jquery or Bootstrap Plugin(Core Javascript)没有 Jquery 或 Bootstrap 插件的多选下拉菜单（核心 Javascript）
【发布时间】：2022-07-07 20:02:52
【问题描述】：

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

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

【问题讨论】：

请在上面找到图片参考！

标签： javascript html css

【解决方案1】：

您必须使用列表和复选框创建一个 div。可以使用 CSS 中的 :focus-within 使它们可见。据我所知，miltiselect 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 删除列表中的点

【讨论】：