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

Question

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

我需要改变下拉B的内容，根据下拉A中的选择使用javascript。不涉及db查询-我事先知道在A中应该选择B的内容，我已经找到了一些使用Ajax的例子，但是由于不涉及db查询，所以没有必要。有人能为我指出一些示例代码来说明如何做到这一点吗？

Answer 1

function&nbsp;configureDropDownLists(ddl1,&nbsp;ddl2)&nbsp;{ &nbsp;&nbsp;var&nbsp;colours&nbsp;=&nbsp;['Black',&nbsp;'White',&nbsp;'Blue']; &nbsp;&nbsp;var&nbsp;shapes&nbsp;=&nbsp;['Square',&nbsp;'Circle',&nbsp;'Triangle']; &nbsp;&nbsp;var&nbsp;names&nbsp;=&nbsp;['John',&nbsp;'David',&nbsp;'Sarah']; &nbsp;&nbsp;switch&nbsp;(ddl1.value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'Colours': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ddl2.options.length&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;colours.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createOption(ddl2,&nbsp;colours[i],&nbsp;colours[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'Shapes': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ddl2.options.length&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;shapes.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createOption(ddl2,&nbsp;shapes[i],&nbsp;shapes[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'Names': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ddl2.options.length&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;names.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createOption(ddl2,&nbsp;names[i],&nbsp;names[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;default: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ddl2.options.length&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;}}function&nbsp;createOption(ddl,&nbsp;text,&nbsp;value)&nbsp;{ &nbsp;&nbsp;var&nbsp;opt&nbsp;=&nbsp;document.createElement('option'); &nbsp;&nbsp;opt.value&nbsp;=&nbsp;value; &nbsp;&nbsp;opt.text&nbsp;=&nbsp;text; &nbsp;&nbsp;ddl.options.add(opt);}<select&nbsp;id="ddl"&nbsp;onchange="configureDropDownLists(this,document.getElementById('ddl2'))"> &nbsp;&nbsp;<option&nbsp;value=""></option> &nbsp;&nbsp;<option&nbsp;value="Colours">Colours</option> &nbsp;&nbsp;<option&nbsp;value="Shapes">Shapes</option> &nbsp;&nbsp;<option&nbsp;value="Names">Names</option></select><select&nbsp;id="ddl2"></select>

Answer 2

在闭包中安装并使用直接的JavaScript，注释中提供了解释(function()&nbsp;{ &nbsp;&nbsp;//setup&nbsp;an&nbsp;object&nbsp;fully&nbsp;of&nbsp;arrays &nbsp;&nbsp;//alternativly&nbsp;it&nbsp;could&nbsp;be&nbsp;something&nbsp;like &nbsp;&nbsp;//{"yes":[{value:sweet,&nbsp;text:Sweet}.....]} &nbsp;&nbsp;//so&nbsp;you&nbsp;could&nbsp;set&nbsp;the&nbsp;label&nbsp;of&nbsp;the&nbsp;option&nbsp;tag&nbsp;something&nbsp;different&nbsp;than&nbsp;the&nbsp;name &nbsp;&nbsp;var&nbsp;bOptions&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;"yes":&nbsp;["sweet",&nbsp;"wohoo",&nbsp;"yay"], &nbsp;&nbsp;&nbsp;&nbsp;"no":&nbsp;["you&nbsp;suck!",&nbsp;"common&nbsp;son"] &nbsp;&nbsp;}; &nbsp;&nbsp;var&nbsp;A&nbsp;=&nbsp;document.getElementById('A'); &nbsp;&nbsp;var&nbsp;B&nbsp;=&nbsp;document.getElementById('B'); &nbsp;&nbsp;//on&nbsp;change&nbsp;is&nbsp;a&nbsp;good&nbsp;event&nbsp;for&nbsp;this&nbsp;because&nbsp;you&nbsp;are&nbsp;guarenteed&nbsp;the&nbsp;value&nbsp;is&nbsp;different &nbsp;&nbsp;A.onchange&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//clear&nbsp;out&nbsp;B &nbsp;&nbsp;&nbsp;&nbsp;B.length&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;//get&nbsp;the&nbsp;selected&nbsp;value&nbsp;from&nbsp;A &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;_val&nbsp;=&nbsp;this.options[this.selectedIndex].value; &nbsp;&nbsp;&nbsp;&nbsp;//loop&nbsp;through&nbsp;bOption&nbsp;at&nbsp;the&nbsp;selected&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;in&nbsp;bOptions[_val])&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//create&nbsp;option&nbsp;tag &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;op&nbsp;=&nbsp;document.createElement('option'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;its&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;op.value&nbsp;=&nbsp;bOptions[_val][i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set&nbsp;the&nbsp;display&nbsp;label &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;op.text&nbsp;=&nbsp;bOptions[_val][i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//append&nbsp;it&nbsp;to&nbsp;B &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B.appendChild(op); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}; &nbsp;&nbsp;//fire&nbsp;this&nbsp;to&nbsp;update&nbsp;B&nbsp;on&nbsp;load &nbsp;&nbsp;A.onchange();})();<select&nbsp;id='A'&nbsp;name='A'> &nbsp;&nbsp;<option&nbsp;value='yes'&nbsp;selected='selected'>yes&nbsp;&nbsp;<option&nbsp;value='no'>&nbsp;no</select><select&nbsp;id='B'&nbsp;name='B'></select>