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

htmlfront end technologyweb development更新于 2026/1/16 1:48:17

在 HTML 中创建下拉列表时，我们使用 <select> 命令，该命令通常用于表单中收集用户输入。提交后，为了引用表单数据，我们使用 name 属性。如果没有 name 属性，下拉列表中将不会显示任何数据。

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

语法

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

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

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

属性	值	描述
Disabled	disabled	禁用输入控件。该按钮将不再接受用户的更改。它也无法获得焦点，并且在 Tab 键切换时会被跳过。
Label	text	标签文本定义使用时使用的标签。
Selected	selected	定义页面加载时选择的默认选项。
Value	text	指定要发送到服务器的选项值
Multiple	Multiple	通过使用多个属性，可以一次选择多个选项。
Name	name	用于定义下拉列表中的名称
Required	required	通过使用此属性，用户可以在提交表单之前选择一个值。
Size	number	此属性用于定义下拉列表中可见选项的数量
Value	text	指定要发送到服务器的选项的值
Autofocus	Autofocus	用于在页面加载时自动获取下拉列表的焦点

示例

以下示例在 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>