如何使用 HTML、CSS 和 JavaScript 模拟选择选项菜单中的复选框？

将复选框添加到选择选项菜单

虽然不可能直接在选择元素中嵌入复选框，但您可以实现使用 HTML、CSS 和 JavaScript 组合实现类似功能。

HTML代码：

创建一个“multiselect”类的 div 容器，用于保存选择菜单和复选框。

在“multiselect”div 中，创建两个子 div：

1. selectBox: 此 div 将包含 select 元素和覆盖单击时选择选项。
2. 复选框：此 div 将保留各个复选框，并且最初会隐藏。

CSS 代码：

将以下样式应用到elements:

• multiselect: 设置固定宽度来限制菜单的大小。
• selectBox: 定位选择元素并相对于 div 的覆盖。
• overSelect: 使用绝对定位覆盖选择选项。
• 复选框： 最初使用“display: none”隐藏复选框。设置标签样式以类似于选择选项。

JavaScript 代码：

向“selectBox”div 添加一个事件侦听器，以切换“复选框”的可见性" 单击时的 div。

示例代码：

<form>
  <div>

此代码将提供一个带有复选框的“选择选项”菜单，单击选择选项时可以打开和关闭这些复选框。复选框将通过在菜单中显示所选项目来模仿选择选项的行为。

以上是如何使用 HTML、CSS 和 JavaScript 模拟选择选项菜单中的复选框？的详细内容。更多信息请关注PHP中文网其他相关文章！