如何根据第一个下拉菜单中的选择自动更新第二个下拉菜单中的选项？

第一个下拉菜单自动更新第二个下拉菜单中的选项

问题陈述：

开发两个下拉菜单下拉菜单，其中第二个下拉菜单中的选项取决于第一个下拉菜单中所做的选择。无需使用数据库即可实现此功能。

解决方案：

初始 HTML：

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<select id="items">
</select></code>

JavaScript:

定义一个函数来处理第一个下拉菜单的更改事件，并相应地更新第二个下拉菜单中的选项。

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

说明：

在此示例中，第二个下拉菜单的选项在 JavaScript 函数中硬编码。当用户从第一个下拉菜单中选择类别时，更改事件会触发 JavaScript 函数。该函数会根据所选类别动态更新第二个下拉菜单中的选项。

以上是如何根据第一个下拉菜单中的选择自动更新第二个下拉菜单中的选项？的详细内容。更多信息请关注PHP中文网其他相关文章！