HTML中的多個下拉菜單過濾器

Question

假設我有兩個下拉菜單，是否可以通過使用HTML代碼來過濾菜單b？ 如果不是，可以用簡單的代碼對這種情況應用哪種方法。與A B

菜單中的b與A1 A2 B1 B2

Answer 1

菜單中，您可以用JavaScript的幫助下做到這一點。

假設你有一個下拉與一些值作爲「顏色，形狀，名稱」以HTML爲：

Dropdown1：

<select id="ddl"> 
<option value=""></option> 
<option value="Colours">Colours</option> 
<option value="Shapes">Shapes</option> 
<option value="Names">Names</option> 
</select> 

而且你要根據第一個下拉列表過濾另一個選定的值

Dropdown2：

<select id="ddl2"> 
</select> 

然後應用下面的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': 
       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;     
     } 

    } 

而對於第二個下拉創建選項運行：

function createOption(selBox, text, value) { 
     var opt = document.createElement('option'); 
     opt.value = value; 
     opt.text = text; 
     selBox.options.add(opt); 
    } 

應用：

在第一下拉onchange="configureDropDownLists(this,document.getElementById('ddl2'))"，如：

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

所以下拉2得到基於第一所選值的過濾器。

請參考fiddle for live demo

希望這將幫助你:)