如何在HTML中添加下拉列表选项？

在HTML中创建下拉列表，我们使用<select> 命令，它通常用于表单中收集用户输入。要提交后引用表单数据，我们使用name属性。如果没有name属性，则不会有下拉列表的数据。

要将下拉列表与标签关联；需要id属性。要在下拉列表中定义选项，我们必须在<select>元素内使用<option> 标签。

语法

以下是HTML中<select>标签的用法：

<select name=" " id="">
   <option value=" ">
   </option>
</select>

HTML <option>标签还支持以下附加属性：

属性

值

描述

禁用

disabled

禁用输入控件。按钮将不会接受用户的更改。它也不能接收焦点，并且在按Tab键时会被跳过。

标签

文本

标签文本 定义使用时的标签.

选中

selected

定义页面加载时要选择的默认选项。

值

文本

指定要发送到服务器的选项的值

多选

multiple

使用multiple属性可以一次选择多个选项。

名称

name

用于在下拉列表中定义名称

必填

required

使用此属性，用户必须在提交表单之前选择一个值。

尺寸

数字

此属性用于定义下拉列表中可见选项的数量

值

文本

指定要发送到服务器的选项的值

自动聚焦

自动聚焦

用于在页面加载时自动获取下拉列表的焦点

示例

以下示例在HTML中向下拉列表添加选项：

<!DOCTYPE html>
<html>
<body>
   <h1>Drop-Down List using Select Command</h1>
   <p>The select element is used to create a drop-down list.</p>
   <form method="get" action="#">
      <label for="cities"> Choose City:</label>
      <select name="cities" id="cities">
         <option value="hyd">Hyderabad</option>
         <option value="Chennai">Chennai</option>
         <option value="bang">Banglore</option>
         <option value="Mumbai">Mumbai</option>
      </select>
      <br>
      <br>
      <input type="submit" value="Choose city">
   </form>
</body>
</html>

示例

以下另一个示例演示了<option>标签的不同属性的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Form Validation</title>
</head>
<body>
   <h1> Form Validation </h1>
   <form>
      <label>Choose validation option:</label>
      <select name="credentials" id="credentials" onchange="displayField()">
         <option value="select">Select</option>
         <option value="pwd">Password Validation</option>
         <option value="pin">Pin Validation</option>
         <option value="mob">Mobile Validation</option>
      </select>
      <br />
      <br />
      <div id="1" hidden>
         <label>Enter your password: </label>
         <input type="text" id="pwd" />
      </div>
      <div id="2" hidden>
         <label>Enter your pin: </label>
         <input type="number" id="pin" />
      </div>
      <div id="3" hidden>
         <label>Enter your mobile number: </label>
         <input type="number" id="mob" />
      </div>
      <button onclick="validate()" />OK</button>
   </form>
</body>
</html>

示例

在以下示例中，我们尝试使用<select>标签和<optgroup>标签在列表中添加选项：

<!DOCTYPE html>
<html>
<body>
   <h1>Inserting optgroup in select element</h1>
   <p>It is used to group related options in a drop-down list:</p>
   <form action="/action_page.php">
      <label for="class">Choose Grade:</label>
      <select name="class" id="class">
         <optgroup label="Grade 1">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
         <optgroup label="Grade 2">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
      </select>
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

更新于：2023年11月18日

1K+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.