根據另一個選擇填充一個下拉菜單然後重定向

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