Jak tworzyć listę pól wyboru dynamicznie za pomocą javascript

AKTUALIZACJA: Kod został zaktualizowany według komentarzy Dana.

Mam problem z projektem, nad którym pracuję. Muszę utworzyć listę pól wyboru w zależności od tego, co zostało wybrane w rozwijanym menu wyboru powyżej. Chciałbym do tego użyć javascript. Udało mi się utworzyć listę rozwijaną wyboru zależną od zaznaczenia powyżej, ale klient chce zamiast niej pól wyboru. Doszedłem do wniosku, że będzie to w zasadzie wykonane w ten sam sposób, z wyjątkiem tworzenia pól tym razem, ale nie mogę go uruchomić. Zazwyczaj używam php do programowania i dlatego nie znam zbyt dobrze javascript. Oto kod, który muszę zrobić, aby wybrać rozwijaną listę rozwijaną .... jaki byłby najlepszy sposób, aby zamiast tego utworzyć listę pól wyboru? Zwróć uwagę, że kod ten został znacznie zredukowany, aby był łatwy do odczytania (tylko te części, które się tu znajdują).

Kod:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function populate(slct1,slct2){
var s1 = document.getElementById(slct1);
var s2 = document.getElementById(slct2);
s2.innerHTML = "";
if(s1.value == "Cat1"){
    var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"];
} else if(s1.value == "Cat2"){
    var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"];
} else if(s1.value == "Cat3"){
    var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"];
}
for(var option in optionArray){
     if (optionArray.hasOwnProperty(option)) {
        var pair = optionArray[option];
        var newOption = document.createElement("option");
        newOption.value = pair;
        newOption.innerHTML = pair;
        s2.options.add(newOption);
    }
}
}
</script>
</head>
<body>
<h2>Dynamic Select Dropdown</h2>
<hr />
Choose a Category:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
   <option value=""></option>
   <option value="Cat1">Cat1</option>
   <option value="Cat2">Cat2</option>
   <option value="Cat3">Cat3</option>
</select>
<hr />
   Choose Subcategory:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

Każda pomoc byłaby bardzo ceniona i postarałbym się jak najlepiej spłacić przysługę, gdybyś kiedykolwiek potrzebował pomocy przy jakimkolwiek rozwoju.

questionAnswers(2)

yourAnswerToTheQuestion