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 

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).

słabo się czuję w JS, moższ mi w tym pomóc?

mam teraz coś takiego, ale to coś mi dalej nie działa....

[HTML] pobierz, plaintext 
 
<script type="text/javascript">
.......
function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
 
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
 
if (L1 == "2") {
document.getElementById("mydiv2").style.display="block";
}
if (L1 == "3") {
document.getElementById("mydiv3").style.display="block";
 
}
}
....................
</script>
 
<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"  id="mydiv2" style="display:none">
                                <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"  id="mydiv3" style="display:none">
                                <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>
 
 
 
[HTML] pobierz, plaintext 

Co ma pomóc funkcja podpięta w ostatnim <select>, będziesz wyłączał poprzednie listy?

Skoro wypełniasz w funkcji fillSelect wybraną listę, to wiesz w tym momencie czy ma elementy czy nie. Zależnie od tego wyłączasz i włączasz kolejne listy.

Oczywiście że nie chcę wyłączać poprzednich wyborów, ale na tą chwilę widzę tylko pierwszy select i bez względu co wybieram za skarby narodów kolejne mi się nie pokazują........

A które miejsce w Twoim kodzie odpowiada za pokazywanie kolejnych list?

Tworzenie

[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);
}
[HTML] pobierz, plaintext 

wyświetlanie

[HTML] pobierz, plaintext 
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;
}
[HTML] pobierz, plaintext 

Pokazywanie - zmiana styli, nie tworzenie. Gdzie jest ten fragment? Jak znajdziesz, to pomyśl czy w dobrym miejscu

w tym miejscu generujemy wartości dla option

[HTML] pobierz, plaintext 
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;
}
[HTML] pobierz, plaintext 

zmiana styli jest tu:

[HTML] pobierz, plaintext 
function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
 
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
 
if (L1 == "2") {
document.getElementById("mydiv2").style.display="block";
}
if (L1 == "3") {
document.getElementById("mydiv3").style.display="block";
 
}
[HTML] pobierz, plaintext 

powinno być w fillSelect, ale tam mi nie działa........... :-(

A obecnie działa?
Skoro jak już wiesz, że powinno być w fillSelect, to może pokażesz właśnie kod tej funkcji po modyfikacjach?

[HTML] pobierz, plaintext 
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;
 
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
 
if (L1 == "2") {
document.getElementById("mydiv2").style.display="block";
}
if (L1 == "3") {
document.getElementById("mydiv3").style.display="block";
 
}
 
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);
}
}
[HTML] pobierz, plaintext 

Napisałem w poście #2 i #4, że powinieneś sprawdzać czy są dane dla listy czy nie, jeśli są, to pokazywać następny <select>.
Gdzie w tym kodzie uzależniasz pokazywanie listy od zawartości poprzedniej?

[HTML] pobierz, plaintext 
if (!empty(document.forms['tripleplay']['List1'])) {
document.getElementById("mydiv2").style.display="block";
}
if (!empty(document.forms['tripleplay']['List2'])) {
document.getElementById("mydiv3").style.display="block";
 
}
[HTML] pobierz, plaintext 

zwariuje....

empty w JavaScript?

W którym miejscu w kodzie wypełniasz listę?

[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);
}
[HTML] pobierz, plaintext 

pisałem na początku że jestem noga z JS

Tok postępowania nie ma związku z językiem programowania.

Tak. W tym fragmencie. Mając zmienną nCat wiesz czy ma w sobie jakieś elementy czy nie, bo jest tablicą. Jeśli tablica ma jakieś elementy, to włączasz pokazywanie tej listy, ale nie kolejnych. Domyślnie, czyli przed sprawdzeniem czy tablica jest pusta, a właściwie po prostu na zdarzenie change wyłączasz widoczność tej listy i następnych.

Czyli zmieniam listę1. Wyłączam widoczność lista2 i lista3. Uzupełniam zawartość lista2. Jeśli były dane do uzupełnienia, to włączam widoczność lista2.
Jeśli zmieniam listę2, to wyłączam widoczność lista3. Uzupełniam listę3, a jeśli były dane to włączam jej widoczność.

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