通过 Javascript 进行动态下拉列表填充
在您需要根据所做的选择填充一个下拉列表 (B) 的内容的场景中在另一个使用 JavaScript 的下拉列表 (A) 中，不需要复杂的 AJAX 查询。相反，您可以利用以下代码片段来完成此操作：
<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);
}要使用此代码，请将其包含在 JavaScript 文件中并将 configureDropDownLists 函数注册为第一个下拉列表的 onChange 事件处理程序 (A) :
<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value="" selected>Select</option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
<select id="ddl2">
</select></code>此代码演示了如何根据第一个下拉列表 (ddl1) 中的选择填充第二个下拉列表 (ddl2)，利用 switch-case 逻辑动态确定 ddl2 的内容。
以上是如何使用 JavaScript 动态填充下拉列表内容？的详细内容。更多信息请关注PHP中文网其他相关文章！
