html下拉菜单怎么做

如何编辑网页HTML中的下拉菜单_如何编辑网页HTML中下拉菜单的实现方法

你是对的。

静态和动态方法各有其用途。
静态CSS简单、直接、容易，但交互性较差。

JavaScript实现比较灵活，可以添加点击外面关闭等功能，但代码量较大。

<select> 标签最容易使用，最适合表单场景。
直接使用即可。

Bootstrap 是一个省时省力的选项，尤其是响应式设计，但它依赖于外部库。

使用哪一种取决于您的需要。

HTML下拉菜单怎么实现_HTMLselect标签选项列表制作

记得上次帮同事调试表单时，他的三级链接区域的下拉菜单出现了问题，提交的数据全是乱码。
我一看，原来他把嵌套的搞混了，以为自己能躲里躲外。
实际上，标准的写法是这样的，在一个<select>中放入一个同级的，但不能再放入另一个。

比如要创建一个中国城市的下拉框，可以分为直辖市、省会城市、其他城市。
例如，如果北京、上海、重庆是直辖市，则直接使用设置为“省会城市”；对于其他普通城市，设置不同的。
这样在接收数据时，正面显示清晰，背面显示可以分组显示。

我尝试使用 JavaScript 动态添加这些选项，但每次我都必须注意 层次结构。
例如，如果使用 document.createElement("optgroup") 创建新组，则还必须使用 setAttribute("label", "label name") 设置组名称。
最烦人的是IE1 1 ，它居然不支持属性，必须用JS来模拟点击事件进行多选。

我想到，如果表单验证没做好，用户选择禁用的“请选择城市”项提交，后端会收到空字符串还是默认值？你需要更多的验证。
如果您选择禁用的项目，则会弹出窗口提示您再次选择该项目。

如今，像 Ant Design 和 Element UI 这样的新表单框架都有自己的级联菜单组件，使用 v-model 来绑定值，编写起来更加简单。
但基本原理还是基于这些基本的<select>、。
有时在查看源代码时，我发现人们甚至为占位符添加了样式，以灰色字体显示文本“请选择”。

等一下，还有一件事。
多选下拉框的大小属性有一个问题。
例如，如果设置了 size="4 "，则如果实际选项大于 4 ，则用户在滚动时会看到选项被截断。
正确的做法是size="n"，以确保n大于或等于选项总数。
但是，某些浏览器在添加选项后就会出现显示延迟和滚动冻结的情况。
这是一次可怕的经历。

所以目前，我们建议您在表单设计中不要使用默认的多选功能，使用复选框或设计两个并行选择，一个填写城市，一个填写省份，并在后端处理中使用逻辑定义链接。
这个应用程序比向选择添加更多内容要简单得多。

不过话虽如此，如果用户只需要填写一个城市，而你将<多选>设置为默认单选，那么用户点击下拉框后发现可以选择多个城市岂不是很奇怪？有时候正式的设计就是这样，你必须平衡简单和复杂。