属于许多选择列

在编程中，我们经常需要让用户在许多选项中选择一项或多项。使用选择列表可以方便地提供这个功能。

一个基本的选择列表通常由以下组成：

• 选项标签
• 选项值（通常用于在后端处理时使用）
• 默认选中选项

HTML选择列表

HTML提供了多种类型的选择列表，包括下拉框、单选框和复选框。

下拉框

下拉框有一个可展开的列表，用户可以从中选择一个选项。

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

上述代码创建了一个名为 "fruit" 的下拉框，它包含三个选项：苹果、香蕉和橙子。

单选框

单选框允许用户从一组选项中选择一个选项。

<input type="radio" name="gender" value="male">男性<br>
<input type="radio" name="gender" value="female">女性<br>

上述代码创建了两个单选框，它们都有一个名称 "gender"。当用户选择男性时，值为 "male"。当用户选择女性时，值为 "female"。

复选框

复选框允许用户从一组选项中选择多个选项。

<input type="checkbox" name="interests" value="reading">阅读<br>
<input type="checkbox" name="interests" value="music">音乐<br>
<input type="checkbox" name="interests" value="sports">体育<br>

上述代码创建了三个复选框，它们都有一个名称 "interests"。当用户选择阅读时，它的值是 "reading"。当用户选择音乐时，它的值是 "music"。当用户选择体育时，它的值是 "sports"。

JavaScript选择列表

如果您希望以编程方式创建和操作选择列表，您可以使用JavaScript。

下拉框

要创建和修改下拉框，您可以使用HTMLSelectElement对象。

var fruitSelect = document.createElement("select");
fruitSelect.name = "fruit";
document.body.appendChild(fruitSelect);

var appleOption = document.createElement("option");
appleOption.value = "apple";
appleOption.text = "苹果";
fruitSelect.appendChild(appleOption);

var bananaOption = document.createElement("option");
bananaOption.value = "banana";
bananaOption.text = "香蕉";
fruitSelect.appendChild(bananaOption);

var orangeOption = document.createElement("option");
orangeOption.value = "orange";
orangeOption.text = "橙子";
fruitSelect.appendChild(orangeOption);

上述代码创建了一个名为 "fruit" 的下拉框，并向其添加了三个选项：苹果、香蕉和橙子。

单选框和复选框

要创建和修改单选框和复选框，您可以使用HTMLInputElement对象。

var maleRadio = document.createElement("input");
maleRadio.type = "radio";
maleRadio.name = "gender";
maleRadio.value = "male";
document.body.appendChild(maleRadio);

var maleLabel = document.createElement("label");
maleLabel.innerHTML = "男性";
document.body.appendChild(maleLabel);

var femaleRadio = document.createElement("input");
femaleRadio.type = "radio";
femaleRadio.name = "gender";
femaleRadio.value = "female";
document.body.appendChild(femaleRadio);

var femaleLabel = document.createElement("label");
femaleLabel.innerHTML = "女性";
document.body.appendChild(femaleLabel);

var readingCheckbox = document.createElement("input");
readingCheckbox.type = "checkbox";
readingCheckbox.name = "interests";
readingCheckbox.value = "reading";
document.body.appendChild(readingCheckbox);

var readingLabel = document.createElement("label");
readingLabel.innerHTML = "阅读";
document.body.appendChild(readingLabel);

var musicCheckbox = document.createElement("input");
musicCheckbox.type = "checkbox";
musicCheckbox.name = "interests";
musicCheckbox.value = "music";
document.body.appendChild(musicCheckbox);

var musicLabel = document.createElement("label");
musicLabel.innerHTML = "音乐";
document.body.appendChild(musicLabel);

var sportsCheckbox = document.createElement("input");
sportsCheckbox.type = "checkbox";
sportsCheckbox.name = "interests";
sportsCheckbox.value = "sports";
document.body.appendChild(sportsCheckbox);

var sportsLabel = document.createElement("label");
sportsLabel.innerHTML = "体育";
document.body.appendChild(sportsLabel);

上述代码创建了两个单选框、三个复选框，以及相应的标签。当用户选择男性时，值为 "male"。当用户选择女性时，值为 "female"。当用户选择阅读时，它的值是 "reading"。当用户选择音乐时，它的值是 "music"。当用户选择体育时，它的值是 "sports"。

总结

选择列表就是让用户从多个选项中选择一项或多项的控件。HTML提供了多种类型的选择列表，包括下拉框、单选框和复选框。使用JavaScript，您可以以编程方式创建和修改选择列表。