在前端开发中，经常需要动态设置下拉菜单（select）的选项（options），以使用户可以选择不同的选项。本文将介绍如何使用 JavaScript 创建和更新 select-options，包括从数据源中获取选项，添加选项到 select 元素中，以及根据用户交互更新选项。
获取选项
要动态设置 select-options，首先需要获取选项数据。数据可以来自于服务器、本地文件或浏览器存储等多种来源。以下是一个简单的示例，它从一个 JSON 文件中获取选项并将其打印到控制台：
--------------------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
假设 options.json 文件包含以下内容：
- --------- ---------- ------- ------- ---- --------- ---------- ------- ------- ---- --------- ---------- ------- ------- --- -
fetch() 函数返回一个 Promise 对象，该对象在获取数据后解析成 JSON 格式。然后，我们可以通过 data 变量访问选项数组，并将其用于创建或更新 select-options。
创建选项
一旦获得了选项数据，下一步就是将选项添加到 select 元素中。以下是一个示例函数，它接受一个数组参数，创建并返回包含所有选项的 HTML 字符串：
-------- ---------------------- - ------ ------------------ -- -------- ----------------------------------------------------------- -
这个函数使用 map() 方法将选项数组转换为包含每个选项的 HTML 字符串。然后，它使用 join() 方法将所有字符串连接起来，以创建最终的 options 字符串。
要使用此函数创建 select-options，只需将其输出到 select 元素的 innerHTML 属性中：
------- -----------------------
--------
----- ------- - -
--------- ---------- ------- ------- ----
--------- ---------- ------- ------- ----
--------- ---------- ------- ------- ---
--
----- -------- - ------------------------------------
------------------ - -----------------------
---------注意，我们在脚本中使用了 const 关键字来声明常量。这是一种新的变量声明方式，它可以帮助避免意外修改变量值。
更新选项
有时候，需要根据用户交互更新 select-options。例如，当用户选择一个省份时，下一个 select 元素应该显示该省份的城市列表。以下是一个示例函数，它接受两个参数：select 元素和选项数组，并用选项数组替换当前的选项：
-------- --------------------- -------- - ---------------- - ----------------------- -
然后，我们可以将这个函数与事件处理程序结合使用，以响应用户交互。例如，以下示例在省份 select 元素的值更改时更新城市 select 元素：
------- -------------- --------------------------
------- -------------------------- ----------
------- -------------------------- ----------
------- -------------------------- ----------
---------
------- ---------------------
--------
----- --------- - -
--------- ------------ ------- --------- ----
--------- ------------ ------- --------- ----
--------- ------------ ------- --------- ---
--
----- ---------------- - -
------------ -
--------- --------- ------- ----- -----
--------- --------- ------- ----- -----
--------- --------- ------- ----- ----
--
------------ -
--------- -------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------