Запись из массива в текстовое поле на основе второго выбора

Question

Привет всем, поэтому я работаю над сайтом моего братства, я создаю форму, где он выбирает первый элемент (глава), он дает вам 2 варианта. Но теперь я хочу, чтобы он мог выбрать строку (на основе второго варианта) и отобразить ее в текстовом поле. например, если я выберу Alpha в раскрывающемся списке, а затем выберите вариант 1 из второго раскрывающегося списка, я хочу, чтобы он отображал a1 в текстовом поле строки. кто-нибудь думает, что они могут мне помочь? спасибо soo много.

window.onload = function() { 
 
    var programs = new Array(); 
 
    programs[0] = ["Alpha", "a1", "two", "Option 1", "three", "four"]; 
 
    programs[1] = ["Alpha", "a2", "two", "Option 2", "three", "four"]; 
 
    programs[2] = ["Beta", "b1", "two", "Option 3", "three", "four"]; 
 
    programs[3] = ["Beta", "b2", "two", "Option 4", "three", "four"]; 
 
    programs[4] = ["Gamma", "c1", "two", "Option 5", "three", "four"]; 
 
    programs[5] = ["Gamma", "c2", "two", "Option 6", "three", "four"]; 
 
    programs[6] = ["Delta", "d1", "two", "Option 7", "three", "four"]; 
 
    programs[7] = ["Delta", "d2", "two", "Option 8", "three", "four"]; 
 
    programs[8] = ["Epsilon", "e1", "two", "Option 9", "three", "four"]; 
 
    programs[9] = ["Epsilon", "e2", "two", "Option 10", "three", "four"]; 
 

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

 
    document.getElementById('programs').onchange = function() { 
 
    var name = this.value; 
 
    var dependentValues = program[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="chapters"> 
 
    <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> 
 

 

 
<input name="line" />

Answer 1

необходимо отформатировать параметры объекта для лучшего прохождения.

Вот что вы могли бы сделать.

var programs = new Array(); 
 
programs[0] = ["Alpha", "a1", "two", "Option 1", "three", "four"]; 
 
programs[1] = ["Alpha", "a2", "two", "Option 2", "three", "four"]; 
 
programs[2] = ["Beta", "b1", "two", "Option 3", "three", "four"]; 
 
programs[3] = ["Beta", "b2", "two", "Option 4", "three", "four"]; 
 
programs[4] = ["Gamma", "c1", "two", "Option 5", "three", "four"]; 
 
programs[5] = ["Gamma", "c2", "two", "Option 6", "three", "four"]; 
 
programs[6] = ["Delta", "d1", "two", "Option 7", "three", "four"]; 
 
programs[7] = ["Delta", "d2", "two", "Option 8", "three", "four"]; 
 
programs[8] = ["Epsilon", "e1", "two", "Option 9", "three", "four"]; 
 
programs[9] = ["Epsilon", "e2", "two", "Option 10", "three", "four"]; 
 

 

 
var programList = {}; 
 
programs.forEach((val) => { 
 
    var key = val[0]; 
 
    val.shift(); 
 
    if (!programList[key]) { 
 
    programList[key] = []; 
 
    } 
 
    programList[key].push(val); 
 

 
}); 
 

 

 

 
document.addEventListener("DOMContentLoaded",() => { 
 
    document.querySelector("#chapters").addEventListener("change", (event) => { 
 

 
    let selectEle = document.querySelector("#chapters"); 
 
    let val = selectEle.options[selectEle.selectedIndex].value; 
 

 
    var html = "<option value=''>Select</option>"; 
 
    programList[val].forEach((val, idx) => { 
 
     html += `<option value="${val[0]}">${val[2]}</option>`; 
 
    }); 
 

 
    document.querySelector("#line").value = ""; 
 
    document.querySelector("#options").innerHTML = html; 
 
    }); 
 

 

 
    document.querySelector("#options").addEventListener("change", (event) => { 
 

 
    let selectEle = document.querySelector("#options"); 
 
    let val = selectEle.options[selectEle.selectedIndex].value; 
 
    document.querySelector("#line").value = val; 
 
    }); 
 

 
});

<select id="chapters"> 
 
    <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> 
 

 

 
<input name="line" id="line" />