Anzeige der Informationen in der zweiten Dropdown-Box basierend auf der Auswahl der ersten von Array + Javascript

Question

Ich bin der WebAdmin für meine Website Bruderschaft, aber ich bin mir nicht sicher, wie dieses Problem anzugehen. Ich möchte zwei Dropdown-Boxen in meiner Form haben. Ich möchte, dass, wenn der Benutzer auf Alpha (Kapitel) klickt, das zweite Dropdown-Feld Option 1 und Option 2 anzeigt. Wenn der Benutzer jedoch Beta (Kapitel) auswählt, zeigt das zweite Dropdown-Feld Option 3 und Option 4. Ich versuche es Mach das rein in JavaScript. Wie würde ich das erreichen?

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

sorry ich nahm viel Zeit. weil ich jquery nicht verwenden konnte.

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

ich sehen würde, wenn Sie die Daten neu strukturieren können es einfacher auf sich selbst zu machen.

Das erste Bit Code hier nimmt Ihre bestehende Struktur und macht in ein Objekt, wo die Eigenschaften die Namen der Kapitel sind, und die Werte sind die Liste der verfügbaren Optionen.

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>

Der Rest des Codes ist eine einfache Ereignisbehandlungsroutine, die die Optionen, indem sie die Eigenschaft der ausgewählten Kapitelnamen basiert erstellt und fügt sie in die HTML.

Beachten Sie, dass der hier verwendete innerHTML-Trick mit alten Versionen von Internet Explorer nicht funktioniert.

Answer 3

die folgende optimierte Ansatz verwenden:

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>