使用 JS 在选择输入中添加新项目 - JavaScript

在编写 Web 应用程序时，经常需要根据用户输入动态更新选择输入中的项目列表。本篇文章将介绍如何使用 JavaScript 在选择输入中添加新项目。

HTML 选择输入元素

在 HTML 中，选择输入元素可以通过 <select> 标签来创建。

<select id="my-select">
  <option value="1">项目1</option>
  <option value="2">项目2</option>
  <option value="3">项目3</option>
</select>

上述代码定义了一个 id 为 my-select 的选择输入元素，其中包含了 3 个选项。

使用 JavaScript 添加新项目

在 JavaScript 中，可以使用 appendChild() 方法向选择输入元素中添加新的选项。

const selectElem = document.getElementById('my-select');
const newOptionElem = document.createElement('option');
newOptionElem.value = '4';
newOptionElem.text = '项目4';
selectElem.appendChild(newOptionElem);

上述代码中，首先通过 getElementById() 方法获取了 id 为 my-select 的选择输入元素。然后，通过 createElement() 方法创建了一个新的 option 元素，并使用 value 属性和 text 属性设置了该选项的值和文本。最后，通过 appendChild() 方法将新选项添加到选择输入元素中。

结语

本文介绍了如何使用 JavaScript 在 HTML 选择输入元素中添加新项目。通过动态更新选择输入的选项，可以使 Web 应用程序更加灵活、实用。