顯示第二個下拉框中的信息，基於從第一個數組中選擇+ javascript

Question

我是我的兄弟會網站的webadmin，但我不知道如何解決此問題。我想在我的表單中放置兩個下拉框。我希望如果用戶點擊Alpha（章節），第二個下拉框將顯示選項1和選項2.但是，如果用戶選擇Beta（章節），第二個下拉框將顯示選項3和選項4.我試圖純粹用JavaScript做這個。我將如何去實現這一目標？

var chapter = new Array(); 
 
chapter[0] = ["Alpha","one","two","Option 1","three","four"]; 
 
chapter[1] = ["Alpha","one","two","Option 2","three","four"]; 
 
chapter[2] = ["Beta","one","two","Option 3","three","four"]; 
 
chapter[3] = ["Beta","one","two","Option 4","three","four"]; 
 
chapter[4] = ["Gamma","one","two","Option 5","three","four"]; 
 
chapter[5] = ["Gamma","one","two","Option 6","three","four"]; 
 
chapter[6] = ["Delta","one","two","Option 7","three","four"]; 
 
chapter[7] = ["Delta","one","two","Option 8","three","four"]; 
 
chapter[8] = ["Epsilon","one","two","Option 9","three","four"]; 
 
chapter[9] = ["Epsilon","one","two","Option 10","three","four"];

<select> 
 
    <option value="">Choose one</option> 
 
    <option value="Alpha">Alpha</option> 
 
    <option value="Beta">Beta</option> 
 
    <option value="Gamma">Gamma</option> 
 
    <option value="Delta">Delta</option> 
 
    <option value="Epsilon">Epsilon</option> 
 
</select> 
 

 
<select> 
 
</select>

Answer 1

對不起，我花了很多時間。因爲我無法使用jquery。

var chapter = new Array(); 
 
chapter[0] = ["Alpha","one","two","Option 1","three","four"]; 
 
chapter[1] = ["Alpha","one","two","Option 2","three","four"]; 
 
chapter[2] = ["Beta","one","two","Option 3","three","four"]; 
 
chapter[3] = ["Beta","one","two","Option 4","three","four"]; 
 
chapter[4] = ["Gamma","one","two","Option 5","three","four"]; 
 
chapter[5] = ["Gamma","one","two","Option 6","three","four"]; 
 
chapter[6] = ["Delta","one","two","Option 7","three","four"]; 
 
chapter[7] = ["Delta","one","two","Option 8","three","four"]; 
 
chapter[8] = ["Epsilon","one","two","Option 9","three","four"]; 
 
chapter[9] = ["Epsilon","one","two","Option 10","three","four"]; 
 

 
document.getElementById("sell").addEventListener("change", addActivityItem, false); 
 

 
function addActivityItem(){ 
 
    var sel= document.getElementById("sel"); 
 
    sel.innerHTML = ''; 
 
    var brr=[]; 
 
var temp= document.getElementById("sell").value; 
 
chapter.forEach(function(a){ 
 
     if(a[0]==temp) 
 
     brr.push(a[3]); 
 
}) ; 
 

 
    
 
    brr.forEach(function(b){ 
 
    var newOption = document.createElement('option'); 
 
    sel.appendChild(newOption); 
 
    newOption.text=b; 
 
    }); 
 

 
}

<select id="sell"> 
 
    <option value="">Choose one</option> 
 
    <option value="Alpha">Alpha</option> 
 
    <option value="Beta">Beta</option> 
 
    <option value="Gamma">Gamma</option> 
 
    <option value="Delta">Delta</option> 
 
    <option value="Epsilon">Epsilon</option> 
 
</select> 
 

 
<select id="sel"> 
 
</select>

Answer 2

我就看你能不能重組的數據，使其對自己更容易。

這裏的代碼的第一位需要您現有的結構，並使其成爲一個對象，其中屬性是章節的名稱，值是可用選項的列表。

window.onload = function() { 
 
    var chapter = new Array(); 
 
    chapter[0] = ["Alpha", "one", "two", "Option 1", "three", "four"]; 
 
    chapter[1] = ["Alpha", "one", "two", "Option 2", "three", "four"]; 
 
    chapter[2] = ["Beta", "one", "two", "Option 3", "three", "four"]; 
 
    chapter[3] = ["Beta", "one", "two", "Option 4", "three", "four"]; 
 
    chapter[4] = ["Gamma", "one", "two", "Option 5", "three", "four"]; 
 
    chapter[5] = ["Gamma", "one", "two", "Option 6", "three", "four"]; 
 
    chapter[6] = ["Delta", "one", "two", "Option 7", "three", "four"]; 
 
    chapter[7] = ["Delta", "one", "two", "Option 8", "three", "four"]; 
 
    chapter[8] = ["Epsilon", "one", "two", "Option 9", "three", "four"]; 
 
    chapter[9] = ["Epsilon", "one", "two", "Option 10", "three", "four"]; 
 

 
    var chapters = chapter.reduce(function(prev, curr) { 
 
    if (prev[curr[0]]) { 
 
     prev[curr[0]].push(curr[3]); 
 
    } else { 
 
     prev[curr[0]] = [curr[3]]; 
 
    } 
 
    return prev; 
 
    }, {}); 
 

 
    document.getElementById('chapter').onchange = function() { 
 
    var name = this.value; 
 
    var dependentValues = chapters[name]; 
 
    document.getElementById('options').options.length = 0; 
 
    document.getElementById('options').innerHTML = dependentValues.reduce(function(prev, curr) { 
 
     prev += '<option value="' + curr + '">' + curr + '</option>'; 
 
     return prev; 
 
    }, ''); 
 
    }; 
 

 
};

<select id="chapter"> 
 
    <option value="">Choose one</option> 
 
    <option value="Alpha">Alpha</option> 
 
    <option value="Beta">Beta</option> 
 
    <option value="Gamma">Gamma</option> 
 
    <option value="Delta">Delta</option> 
 
    <option value="Epsilon">Epsilon</option> 
 
</select> 
 

 
<select id="options"> 
 
</select>

的代碼的其餘部分是通過創建基於獲得的選擇章節名稱的屬性的選項，然後將它們添加到HTML一個簡單的事件處理程序。

請注意，此處使用的innerHTML技巧不適用於舊版本的Internet Explorer。

Answer 3

使用以下方法優化：

var chapter = [ 
 
["Alpha","one","two","Option 1","three","four"], 
 
["Alpha","one","two","Option 2","three","four"], 
 
["Beta","one","two","Option 3","three","four"], 
 
["Beta","one","two","Option 4","three","four"], 
 
["Gamma","one","two","Option 5","three","four"], 
 
["Gamma","one","two","Option 6","three","four"], 
 
["Delta","one","two","Option 7","three","four"], 
 
["Delta","one","two","Option 8","three","four"], 
 
["Epsilon","one","two","Option 9","three","four"], 
 
["Epsilon","one","two","Option 10","three","four"]]; 
 

 
document.getElementById("main-box").addEventListener("change", function() { 
 
    var selectbox = document.getElementById("dependant-box"), 
 
\t val = this.value; 
 
\t 
 
    selectbox.innerHTML = ''; 
 
    chapter.forEach(function(c){ 
 
     if (c[0] === val){ 
 
\t opt = document.createElement('option'); 
 
\t opt.text = c[3]; 
 
\t selectbox.appendChild(opt); 
 
\t } 
 
    }); 
 
});

<select id="main-box"> 
 
    <option value="">Choose one</option> 
 
    <option value="Alpha">Alpha</option> 
 
    <option value="Beta">Beta</option> 
 
    <option value="Gamma">Gamma</option> 
 
    <option value="Delta">Delta</option> 
 
    <option value="Epsilon">Epsilon</option> 
 
</select> 
 

 
<select id="dependant-box"> 
 
</select>