如何使用 JavaScript 根据另一个下拉列表中的选择填充一个下拉列表？

使用 JavaScript 根据另一个下拉列表中的选择填充一个下拉列表

当面临根据另一个下拉列表中的选择动态更新一个下拉列表中的选项的任务时，它是对于避免不必要的复杂性（例如数据库查询）至关重要。让我们探索一个简单的基于 JavaScript 的解决方案，无需 AJAX 调用即可完成此任务。

为了说明此方法，请考虑一个场景，其中有两个下拉列表：下拉列表 A 包含“颜色”、“”等选项形状”和“名称”以及下拉菜单 B。我们希望根据下拉菜单 A 中所做的选择填充下拉菜单 B 中的选项。

示例代码

以下 JavaScript 函数演示了如何实现此功能：

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i &lt; colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i &lt; shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i &lt; names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

HTML 标记

以下 HTML 标记包括两个下拉列表：

<code class="html">&lt;select id=&quot;ddl&quot; onchange=&quot;configureDropDownLists(this,document.getElementById('ddl2'))&quot;&gt;
  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
  &lt;option value=&quot;Colours&quot;&gt;Colours&lt;/option&gt;
  &lt;option value=&quot;Shapes&quot;&gt;Shapes&lt;/option&gt;
  &lt;option value=&quot;Names&quot;&gt;Names&lt;/option&gt;
&lt;/select&gt;

&lt;select id=&quot;ddl2&quot;&gt;&lt;/select&gt;</code>

用法

使用此功能，只需调用 configureDropDownLists 函数，传递第一个下拉列表 (ddl1) 和第二个下拉列表 (ddl2) 作为参数。该函数将根据下拉列表 A 中的选择来处理下拉列表 B 的动态填充。

此代码片段演示了一个完整的工作解决方案，允许您使用 JavaScript 根据另一个下拉列表中的选择动态填充一个下拉列表，无需数据库调用或 AJAX 请求。

以上是如何使用 JavaScript 根据另一个下拉列表中的选择填充一个下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！