根据另一个下拉列表中的一个填充下拉列表

Question

我需要使用JavaScript根据下拉菜单A中的选择更改下拉菜单B的内容。没有涉及到数据库查询-
我事先知道应该在A中选择B的内容。我已经找到了一些使用AJAX的示例，但是由于没有涉及到数据库查询，所以没有必要。谁能为我指出一些示例代码以实现此目的？

Answer 1

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);

}


<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">

  <option value=""></option>

  <option value="Colours">Colours</option>

  <option value="Shapes">Shapes</option>

  <option value="Names">Names</option>

</select>



<select id="ddl2">

</select>