如何在没有数据库查询的情况下根据选择动态填充下拉列表？

根据选择动态填充下拉列表

当面临根据另一个下拉列表中所做的选择修改一个下拉列表内容的任务时，了解如何用JavaScript来实现这个功能至关重要。与需要数据库查询的情况不同，这个过程可以在不使用 AJAX 的情况下简化。

为了帮助您，我们提供了一个简洁有效的 JavaScript 代码示例，演示如何填充基于第二个下拉列表（下拉列表 B）在第一个下拉菜单（下拉菜单 A）中所做的选择。此代码不涉及任何外部数据检索或数据库查询：

<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 < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < 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);
}</code>

在此代码中，我们定义了三个数组（颜色、形状和名称），其中包含应在下拉菜单 B 中显示的值下拉列表 A 中的每个相应选项。

当用户从下拉列表 A 中选择一个选项时，将调用 configureDropDownLists 函数。根据所选选项，该函数会清除下拉菜单 B 的内容，并使用相关数组中的适当值重新填充它。

您可以通过在 HTML 文档中创建两个下拉菜单并使用 onchange 事件来实现此代码第一个下拉列表上的处理程序以触发填充第二个下拉列表的函数。

以上是如何在没有数据库查询的情况下根据选择动态填充下拉列表？的详细内容。更多信息请关注PHP中文网其他相关文章！