HTML 元素: select

htmlselect元素是表单中最常见的经典下拉列表。它允许用户从一组选项中进行选择。可以选择多个选项，但用户通常需要为每个select字段选择一个选项。

例子

句法

1    <select name="name" required>    
2     <option value="1">John</option>    
3     <option value="2">Jane</option>    
4     <option value="3">Donald</option>    
5     <option value="4">Chuck</option>    
6     <option value="5">Leslie</option>    
7    </select>

启用属性 (true)的 select 元素multiple允许多个选项与表单提交一起提交。

1    <select multiple name="name" required>    
2     <option value="1">John</option>    
3     <option value="2">Jane</option>    
4     <option value="3">Donald</option>    
5     <option value="4">Chuck</option>    
6     <option value="5">Leslie</option>    
7    </select>

结果

See the Pen  HTML Element: <select> by Envato Tuts+ (@tutsplus)  on CodePen.

浏览器支持

浏览器以不同方式显示select元素，这取决于它们的渲染引擎。看看这个例子，它select在 Google chrome（由 Blink 提供支持）、Firefox（由 Quantum 提供支持）和 safari（由 WebKit 提供支持）中显示了相同的元素。 

属性

元素select支持HTML 中的全局属性。全局属性对于所有 HTML 元素都是通用的，并且可以用于所有元素（尽管它们可能对其中一些元素没有太大影响）。

除了全局属性之外，该select元素还有一组其他属性：

• autocomplete：点击表格自动填写。

• disabled: 表单控件是否被禁用。

• form: 将select与form元素相关联。

• multiple: 是否允许多个值。

• name：用于表单提交或通过 form.elements api 的元素的名称。

• required: 是否select为表单提交必填项。

• size: 的大小select。

内容

该select元素支持零个或多个option、optgroup和脚本支持 元素。

如果选择一个值是可选的，您可能希望<option>在元素顶部包含一个空值<select>。

相关的 HTML 元素

• 该<select>元素通常在 a 中找到<form>，尽管在其他地方使用 a 是完全有效的 HTML <select>。

• element<select>与 element 非常相似<datalist>，因为两者都为用户提供了多种<option>选择。但是，更多的是建议<datalist>选项列表，用户实际上可以输入自己的值。