[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 

[krzesik]

Bardzo mi pomogły Twoje podpowiedzi, już mi to działa, ale mam jeszcze jedno pytanie czy jeśli zrobię to analogicznie to chciałbym aby po wybraniu odpowiedniej opcji pojawił mi się ukryty input.
wydaje mi się że zrobiłem dobrze, ale jednak efekt końcowy nie jest taki jaki oczekuję. Zerknij proszę

[HTML] pobierz, plaintext 
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);
 
if ((document.forms['tripleplay']['List1'].value=='2') || (document.forms['tripleplay']['List1'].value=='3'))
{
document.getElementById("mydiv2").style.display="block";
}
else
{
document.getElementById("mydiv2").style.display="none";
}
 
if (document.forms['tripleplay']['List1'].value!='' && document.forms['tripleplay']['List2'].value=='6')
{
    document.getElementById("mydiv2").style.display="block";
    document.getElementById("mydiv3").style.display="block";
}
else
{
    document.getElementById("mydiv3").style.display="none";
}
if (document.forms['tripleplay']['List2'].value=='3')
{
    document.getElementById("mydiv4").style.display="block";
}
else
{
    document.getElementById("mydiv4").style.display="none";
}
    }
 
 
....................
 
<div id="mydiv4" class="form-group" style="display:none">
                                <label for="uwagi">Numer </label>
                                <input name="nr_probki" type="text" id="uwagi" value="123456" readonly class="form-control">
                            </div>
 
[HTML] pobierz, plaintext 

dziękuję za cierpliwość i pomoc. jest już OK

Ten post edytował krzesik 11.08.2019, 17:36:12