当前位置：极客笔记 > HTML > HTML 问答 > 在HTML中创建可选择列表

在HTML中创建可选择列表

在HTML中创建可选择列表

参考： Create a selectable list in HTML

在网页设计中，可选择列表是一种常见的用户界面元素，它允许用户从一系列选项中选择一个或多个项目。HTML提供了多种方式来创建这样的列表，包括使用<select>元素创建下拉列表，使用<input type="checkbox">和<input type="radio">创建复选框和单选按钮列表，以及使用JavaScript增强交互性。本文将详细介绍如何在HTML中创建可选择列表，并提供多个示例代码。

使用<select>元素创建下拉列表

<select>元素是创建下拉列表的基础。它允许用户从一个下拉菜单中选择一个选项。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表示例 - how2html.com</title>
</head>
<body>
<select name="options">
  <option value="option1">Option 1 - how2html.com</option>
  <option value="option2">Option 2 - how2html.com</option>
  <option value="option3">Option 3 - how2html.com</option>
</select>
</body>
</html>

Output:

在HTML中创建可选择列表

创建带有复选框的列表

复选框允许用户选择多个选项。每个复选框都是独立的，用户可以随意勾选或取消勾选。下面是一个复选框列表的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框列表示例 - how2html.com</title>
</head>
<body>
<form action="#">
  <label><input type="checkbox" name="option1"> Option 1 - how2html.com</label><br>
  <label><input type="checkbox" name="option2"> Option 2 - how2html.com</label><br>
  <label><input type="checkbox" name="option3"> Option 3 - how2html.com</label><br>
</form>
</body>
</html>

Output:

在HTML中创建可选择列表

创建带有单选按钮的列表

单选按钮允许用户从一组选项中选择一个。同一组的单选按钮通过具有相同的name属性值来关联。下面是一个单选按钮列表的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮列表示例 - how2html.com</title>
</head>
<body>
<form action="#">
  <label><input type="radio" name="options" value="option1"> Option 1 - how2html.com</label><br>
  <label><input type="radio" name="options" value="option2"> Option 2 - how2html.com</label><br>
  <label><input type="radio" name="options" value="option3"> Option 3 - how2html.com</label><br>
</form>
</body>
</html>

Output:

在HTML中创建可选择列表

使用JavaScript增强列表的交互性

我们可以使用JavaScript来增强列表的交互性，例如，创建一个可筛选的列表，允许用户输入文本来过滤列表项。下面是一个使用JavaScript创建的可筛选列表示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可筛选列表示例 - how2html.com</title>
<script>
function filterList() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>
</head>
<body>
<input type="text" id="myInput" onkeyup="filterList()" placeholder="Search for names..">
<ul id="myUL">
  <li><a href="#">Adele - how2html.com</a></li>
  <li><a href="#">Agnes - how2html.com</a></li>
  <li><a href="#">Billy - how2html.com</a></li>
  <li><a href="#">Bob - how2html.com</a></li>
  <li><a href="#">Calvin - how2html.com</a></li>
  <li><a href="#">Christina - how2html.com</a></li>
  <li><a href="#">Cindy - how2html.com</a></li>
</ul>
</body>
</html>

Output:

在HTML中创建可选择列表

创建一个可多选的下拉列表

有时候，我们需要允许用户在下拉列表中选择多个选项。这可以通过为<select>元素添加multiple属性来实现。下面是一个可多选的下拉列表示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选下拉列表示例 - how2html.com</title>
</head>
<body>
<select name="options" multiple>
  <option value="option1">Option 1 - how2html.com</option>
  <option value="option2">Option 2 - how2html.com</option>
  <option value="option3">Option 3 - how2html.com</option>
</select>
</body>
</html>

Output:

在HTML中创建可选择列表

使用列表和CSS创建自定义样式的选择列表

我们可以使用无序列表<ul>和列表项<li>来创建一个选择列表，并通过CSS来自定义其样式。下面是一个自定义样式的选择列表示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义样式选择列表示例 - how2html.com</title>
<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid #ddd;
}

li:hover {
  background-color: #f5f5f5;
}
</style>
</head>
<body>
<ul>
  <li onclick="alert('Option 1 selected - how2html.com')">Option 1 - how2html.com</li>
  <li onclick="alert('Option 2 selected - how2html.com')">Option 2 - how2html.com</li>
  <li onclick="alert('Option 3 selected - how2html.com')">Option 3 - how2html.com</li>
</ul>
</body>
</html>

Output:

在HTML中创建可选择列表

结论

在HTML中创建可选择列表是一项基本技能，它有助于提高用户界面的交互性和用户体验。通过使用<select>、<input type="checkbox">、<input type="radio">等元素，我们可以创建各种类型的选择列表。此外，通过结合JavaScript和CSS，我们可以创建更复杂和用户友好的选择列表。在设计网页时，合理地使用这些技术可以帮助我们构建更加动态和吸引人的网站。

以上示例代码提供了创建可选择列表的多种方法，每个示例都是独立的，并且可以直接在HTML文件中运行。由于系统限制，我无法一次性提供超过8000字的文章。然而，我可以继续提供更多的示例代码，以帮助你了解如何在HTML中创建可选择列表。

使用CSS和JavaScript创建带有高亮选中效果的列表

我们可以使用JavaScript来监听用户的点击事件，并通过CSS来改变被选中列表项的样式。以下是一个带有高亮选中效果的列表示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高亮选中效果列表示例 - how2html.com</title>
<style>
.selected {
  background-color: #3399ff;
  color: white;
}
</style>
<script>
function highlightItem(item) {
  var items = document.querySelectorAll('.selectable');
  items.forEach(function(elem) {
    elem.classList.remove('selected');
  });
  item.classList.add('selected');
}
</script>
</head>
<body>
<ul>
  <li class="selectable" onclick="highlightItem(this)">Item 1 - how2html.com</li>
  <li class="selectable" onclick="highlightItem(this)">Item 2 - how2html.com</li>
  <li class="selectable" onclick="highlightItem(this)">Item 3 - how2html.com</li>
</ul>
</body>
</html>

Output:

在HTML中创建可选择列表

创建一个带图标的选择列表

有时候，我们希望在选择列表中添加图标来增强视觉效果。以下是一个带图标的选择列表示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带图标的选择列表示例 - how2html.com</title>
<style>
li {
  list-style: none;
  cursor: pointer;
}

li:before {
  content: "\2713\0020"; /* Unicode character for check mark */
  color: green;
}
</style>
</head>
<body>
<ul>
  <li onclick="alert('Item 1 selected - how2html.com')">Item 1 - how2html.com</li>
  <li onclick="alert('Item 2 selected - how2html.com')">Item 2 - how2html.com</li>
  <li onclick="alert('Item 3 selected - how2html.com')">Item 3 - how2html.com</li>
</ul>
</body>
</html>

Output:

在HTML中创建可选择列表

使用HTML和CSS创建一个垂直标签页

垂直标签页是一种特殊的可选择列表，它允许用户在不同的视图或内容区域之间切换。以下是一个垂直标签页的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直标签页示例 - how2html.com</title>
<style>
.tab {
  cursor: pointer;
  padding: 10px;
  margin: 0;
  background: #f1f1f1;
  border: none;
  outline: none;
  transition: background-color 0.3s;
}

.tab:hover {
  background-color: #ddd;
}

.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}

.active, .tab:hover {
  background-color: #ccc;
}
</style>
</head>
<body>
<div class="tab" onclick="openTab(event, 'Tab1')">Tab 1 - how2html.com</div>
<div class="tab" onclick="openTab(event, 'Tab2')">Tab 2 - how2html.com</div>
<div class="tab" onclick="openTab(event, 'Tab3')">Tab 3 - how2html.com</div>

<div id="Tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for Tab 1 - how2html.com</p>
</div>

<div id="Tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for Tab 2 - how2html.com</p>
</div>

<div id="Tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for Tab 3 - how2html.com</p>
</div>

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</body>
</html>

Output:

在HTML中创建可选择列表

由于篇幅限制，我无法一次性提供所有的示例代码。以上示例代码展示了如何使用HTML、CSS和JavaScript来创建不同风格和功能的可选择列表。每个示例都是独立的，并且可以直接在HTML文件中运行。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程