[HTML][JavaScript]Zależne pola select - jak ukryć niepotrzebne Opcje

[krzesik]

Witam, mam problem jak w temacie
Wybieram element z pierwszego selecta, w zależności od wyboru pokazuje mi zawartość w drugim, wybieram w drugim pokazuje wybrane w trzecim.
Może być sytuacja że wybieram w pierwszym i na tym koniec, podobnie w drugim.Jak pokazzywać selekty w razie potrzeby?

[HTML] pobierz, plaintext 
<form method="post" action="" name="tripleplay" >
........
<label for="Select2">Rodzaj </label>
                                <select name='List1' onchange="fillSelect(this.value,this.form['List2'])" class="form-control">
                                        <option selected>Wybierz rodzaj</option>
                                </select>
                            </div>
                            <div class="form-group" >
                                <label for="Select2">Dane dodatkowe</label>
                                <select name='List2' onchange="fillSelect(this.value,this.form['List3'])" class="form-control">
                                        <option selected></option>
                                </select>
                            </div>
                            <div class="form-group" >
                                <label for="Select3">Opcje</label>
                                <select name='List3' onchange="getValue(this.value, this.form['List2'].value,this.form['List1'].value)" class="form-control">
                                        <option selected ></option>
                                </select>
                            </div>
.......
</form>
 
 
<script type="text/javascript">
 
var categories = [];
categories["startList"] = ["1","2","3"]
categories["2"] = ["a","b","c","d","e","f","g"];
categories["3"] = ["x","y"];
categories["e"] = ["e1","e2","e3","e4","e5","e6","e7"];
 
var nLists = 3; // number of select lists in the set
 
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
 
function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}
 
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
 
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
 
</script>
 
[HTML] pobierz, plaintext 

[trueblue]

Jeśli są jakieś wartości dla <select>, a dokładnie tworzące <option>, to włącz wyświetlanie tej listy i kolejnej, jeśli brak, to wyłącz.
Domyślnie wszystkie począwszy od drugiej wyłączone.
Wyłączanie poprzez style.display = 'none' lub nadawanie/odejmowanie klasy (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).