如何使用＆lt; select＆gt;如何创建下拉列表。 and＆lt;选项＆gt; 标签？-html教程-PHP中文网

如何使用

在HTML中创建下拉列表涉及使用<select></select>和<option></option>标签。 <select></select>元素充当下拉菜单的容器，而每个<option></option>元素代表下拉列表中的一个项目。

这是有关如何创建基本下拉列表的分步指南：

从<select></select>标签开始：
<select></select>标签是定义下拉列表的最外部元素。它可以具有各种属性，例如name ，该属性用于提交表单数据。
```
 <code class="html"><select name="fruits">  </select></code>
```
登录后复制
登录后复制
在<select></select>中添加<option></option>标签：
每个<option></option>代表下拉菜单中的一个可选项目。您可以指定具有值属性的值，该value属性是在提交表单时发送的。如果省略了value属性，则将发送<option></option>的文本内容。
```
 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
登录后复制

（可选）设置默认选定选项：
要设置默认的选定选项，您可以在要预选的<option></option>上使用selected属性。

 <code class="html"><select name="fruits"> <option value="apple">Apple</option> <option value="banana" selected>Banana</option> <option value="cherry">Cherry</option> </select></code>

登录后复制

这种基本结构使您可以创建一个功能下拉列表，用户可以与之交互以选择其首选选项。

我可以在下拉列表中添加多个选择吗？

是的，您可以使用<select></select>标签上的multiple属性在下拉列表中启用多个选择。当存在此属性时，用户可以从列表中选择多个选项。

这是实现多选择下拉列表的方法：

将multiple属性添加到<select></select>标签：

 <code class="html"><select name="fruits" multiple> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>

登录后复制

可选，指定大小：
要一次显示多个选项，您可以在<select></select>标签上设置size属性。如果size大于1，则下拉列表将成为一个列表框，显示许多选项而无需滚动。
```
 <code class="html"><select name="fruits" multiple size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> </select></code>
```
登录后复制

使用multiple属性，用户可以在单击选项时按住Ctrl （Windows）或Cmd （Mac）键来选择多个选项。提交表单时，选定的值将作为具有相同名称属性的数组提交。

如何设置下拉列表以匹配我的网站的设计？

可以通过CSS实现匹配网站设计的下拉列表。由于下拉列表是表单元素，因此某些属性不是直接风格的，但是仍然有很多方法可以自定义其外观。

这是有关如何样式下拉列表的指南：

<select></select>标签的基本样式：

您可以为<select></select>元素本身定型以调整其大小，字体，边框和背景。
```
 <code class="css">select { width: 200px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('arrow.png') 96% / 15% no-repeat #eee; }</code>
```
登录后复制
注意appearance: none删除默认浏览器样式，以及用于下拉指示器的自定义箭头映像。
样式<option></option>元素：

样式<option></option>元素更有限。您可以更改一些属性，但是由于安全限制，目前无法在所有浏览器中进行完整的自定义。
```
 <code class="css">option { font-weight: normal; display: block; white-space: nowrap; min-height: 1.2em; padding: 0px 2px 1px; }</code>
```
登录后复制

选择时样式：

您可以在焦点或选择选项时样式<select></select>元素。

 <code class="css">select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 5px rgba(102, 175, 233, 0.5); }</code>

登录后复制

响应设计：

您可以使用媒体查询来调整不同屏幕尺寸的样式。
```
 <code class="css">@media (max-width: 600px) { select { width: 100%; } }</code>
```
登录后复制

请记住，浏览器兼容性可能会有所不同，因此请务必在不同的浏览器和设备上测试您的样式下拉菜单。

可以将几个属性与<select></select>标签一起使用，以控制其行为并提供其他信息。这是一些最常见的：

姓名：
指定控件的名称，该控件的名称在提交表单时将带有表单数据。
```
 <code class="html"><select name="fruits">  </select></code>
```
登录后复制
登录后复制

多种的：
允许用户选择多个选项。

 <code class="html"><select name="fruits" multiple> <!-- Options go here --> </select></code>

登录后复制

尺寸：
定义下拉列表中可见选项的数量。如果size大于1，则将成为列表框而不是下拉列表。
```
 <code class="html"><select name="fruits" size="3">  </select></code>
```
登录后复制

禁用：
禁用选择元素，以防止用户交互。

 <code class="html"><select name="fruits" disabled> <!-- Options go here --> </select></code>

登录后复制

必需的：
指定用户必须在提交表单之前选择一个选项。

 <code class="html"><select name="fruits" required> <option value="">Select a fruit</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select></code>

登录后复制

自动对焦：
当页面加载时，会自动将焦点设置为<select></select>元素。
```
 <code class="html"><select name="fruits" autofocus>  </select></code>
```
登录后复制