根据另一个选择填充一个下拉菜单然后重定向

Question

我试图建立一个两层下拉菜单，其中第二个下拉菜单填充第二个下拉菜单。我在网站上发现了很多例子，但是我希望我的菜单在第二个菜单被选中后重定向到一个页面，并且不能显示出来。

我不是那种速度与JS所以请忍受与我。

下面的代码是从另一篇文章的例子：

<script type="text/javascript"> 
function configureDropDownLists(ddl1,ddl2) { 
    var colours = new Array('Black', 'White', 'Blue'); 
    var shapes = new Array('Square', 'Circle', 'Triangle'); 
    var names = new Array('John', 'David', 'Sarah'); 

    switch (ddl1.value) { 
     case 'Colours': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < colours.length; i++) { 
       createOption(document.getElementById(ddl2), colours[i], colours[i]); 
      } 
      break; 
     case 'Shapes': 
      document.getElementById(ddl2).options.length = 0; 
     for (i = 0; i < colours.length; i++) { 
      createOption(document.getElementById(ddl2), shapes[i], shapes[i]); 
      } 
      break; 
     case 'Names': 
      document.getElementById(ddl2).options.length = 0; 
      for (i = 0; i < colours.length; i++) { 
       createOption(document.getElementById(ddl2), names[i], names[i]); 
      } 
      break; 
      default: 
       document.getElementById(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,'ddl2')"> 
<option value=""></option> 
<option value="Colours">Colours</option> 
<option value="Shapes">Shapes</option> 
<option value="Names">Names</option> 
</select> 
<select id="ddl2"> 
</select> 

这一切工作正常，但我想在页面重定向到某处该人在第二个下拉菜单中进行选择之后的网站。

任何人都可以帮助如何适应代码，使之发生？

谢谢

Answer 1

我想要的页面重定向到该网站上的某个地方的人在做第二个下拉选择后。

在change事件第二<select>元素的钩，然后提交从那里形式：

<select id="ddl2" onChange="redirect(this)"> 
</select> 

function redirect(select) { 
    // The simplest way: call submit on the form element the select belongs to: 
    select.form.submit(); 
} 

但你也可以动态地在提交之前改变形式的目标属性，或者只是navigate away 。

更新：为了使提交的工作，你当然就需要给你选择一些name属性，如：

<form action="/router.php" method="GET"> 
    <select name="first" onchange="configureDropDownLists(this,'ddl2')"> 
     ... 
    </select> 
    <select name="second" id="ddl2" onChange="redirect(this)"> 
    </select> 
</form> 

---

虽然你configureDropDownLists功能可以正常工作，你可能会无法改进使用switch语句，但是使用对象字面值，并且在执行相同的操作之前选择一组选项值，如果在该对象中找到一个：

function configureDropDownLists(firstSelect, secondId) { 
    var map = { 
     "colours": ['Black', 'White', 'Blue'], 
     "shapes": ['Square', 'Circle', 'Triangle'], 
     "names": ['John', 'David', 'Sarah'] 
    }; 

    var value = firstSelect.value.toLowerCase(); 
    var optionsArr = map[value]; 

    var secondSelect = document.getElementById(secondId); 
    secondSelect.options.length = 0; // remove all options 
    if (optionsArr) { 
     for (var i=0; i<optionsArr.length; i++) { 
       createOption(secondSelect, optionsArr[i], optionsArr[i]); 
     } 
    } 
}