添加选项以动态选择框 jQuery

动态选择框非常常用，允许您在不刷新网页的情况下动态加载选项。在本教程中，我们将介绍如何使用 jQuery 来添加选项以动态选择框。

HTML

首先，让我们看一下 HTML 代码。这里我们只需要一个空的选择框，这个选择框将在运行 JavaScript 后动态添加选项。

<select id="my-select"></select>

JavaScript

接下来，我们需要编写一个函数来使用 jQuery 向选择框添加选项。我们将在该函数中使用 jQuery 中的 append() 方法来向选择框添加选项。

function addOptionToSelect(value, text){
  $("#my-select").append(`<option value="${value}">${text}</option>`);
}

该函数接受两个参数，第一个参数是值（value），第二个参数是选项文本（text）。使用这两个参数，我们可以动态为选择框添加新的选项。此外，我们还使用 ES6 模板字符串来创建选项的 HTML 代码。

使用

现在我们已经准备好向选择框添加选项了。为了添加新选项，我们只需要调用 addOptionToSelect() 函数，并提供值和文本参数。

addOptionToSelect("option1", "Option 1");
addOptionToSelect("option2", "Option 2");
addOptionToSelect("option3", "Option 3");

现在，运行该代码将向选择框添加三个选项。

完整代码

HTML 代码：

<select id="my-select"></select>

JavaScript 代码：

function addOptionToSelect(value, text){
  $("#my-select").append(`<option value="${value}">${text}</option>`);
}

addOptionToSelect("option1", "Option 1");
addOptionToSelect("option2", "Option 2");
addOptionToSelect("option3", "Option 3");

这就是如何使用 jQuery 向动态选择框添加选项。