HTML 下拉列表

在本文中，我们将介绍如何使用 HTML 创建下拉列表（select dropdown list）。下拉列表是一种常见的用户界面元素，用于让用户从预定义的选项中进行选择。

阅读更多：HTML 教程

HTML select 元素

在 HTML 中，我们可以使用 <select> 元素来创建下拉列表。下拉列表由 <select> 元素和一个或多个 <option> 元素组成。

下面是一个基本的下拉列表示例：

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

在上述示例中，<select> 元素包含三个 <option> 元素，分别表示三个选项。<option> 元素的 value 属性定义了选项的值，而元素内的文本则作为选项的显示文本。

设置默认选项

要设置默认选项，可以在 <option> 元素中使用 selected 属性。下面的示例将第二个选项设置为默认选项：

<select>
  <option value="option1">选项1</option>
  <option value="option2" selected>选项2</option>
  <option value="option3">选项3</option>
</select>

分组选项

我们还可以使用 <optgroup> 元素将选项进行分组。下面的示例将选项分为两组：

<select>
  <optgroup label="组1">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </optgroup>
  <optgroup label="组2">
    <option value="option4">选项4</option>
    <option value="option5">选项5</option>
  </optgroup>
</select>

多选下拉列表

如果想要允许用户选择多个选项，可以在 <select> 元素中添加 multiple 属性。下面的示例创建了一个允许多选的下拉列表：

<select multiple>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
</select>

使用 CSS 定制下拉列表样式

通过 CSS，我们可以自定义下拉列表的外观。可以修改背景颜色、文字颜色、边框样式等。下面是一个简单的示例：

<style>
  select {
    background-color: lightblue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
  }
</style>

<select>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

使用 JavaScript 获取选择的选项

使用 JavaScript，我们可以获取用户选择的选项。可以通过 selectedIndex 属性获取选中选项的索引，通过 value 属性获取选中选项的值。下面是一个简单的示例：

<script>
  function showSelectedOption() {
    var selectElement = document.getElementById("mySelect");
    var selectedIndex = selectElement.selectedIndex;
    var selectedValue = selectElement.value;

    alert("已选择选项的索引：" + selectedIndex + "\n已选择选项的值：" + selectedValue);
  }
</script>

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<button onclick="showSelectedOption()">显示选择的选项</button>