Witam,

Jestem początkujący i chciałbym zrobić dwie zależne od siebie listy. Chodzi o to, że pierwsza listwa:

<select name="1">
<option name="a">a </option>
<option name="b">b </option>
<option name="c">c </option>
</select>

Jak utworzyć warunek, żeby przy wybraniu "a" wyskakiwała konkretnie przypisana druga lista np.
Jeśli wybierzesz "a" to:

<select name="aa">
<option> a1</option>
<option> a2</option>
</select>

Proszę o pomoc.

https://stackoverflow.com/questions/2767393...d-to-each-other

Dzięki za podpowiedź, ale nawet jak wkleiłem tamten kod ze strony to wyskakują błedy:


var options2 = sel2.querySelectorAll('option'); -> Uncaught TypeError: Cannot read property 'querySelectorAll' of null

sel2.innerHTML = ''; -> Uncaught TypeError: Cannot set property 'innerHTML' of null


Z czym to jest związane?

Co zawiera zmienna sel? Pewnie przez brak id jest null

sel2 jest to id select'a

<select id="sel2">

console.log(sel2) i pokaż wynik (w konsoli przeglądarki).

formularz.js:3 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at formularz.js:3
(anonymous) @ formularz.js:3

Kod jest taki:

var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var options2 = sel2.querySelectorAll('option');

function giveSelection(selValue) {
sel2.innerHTML = '';
for (var i = 0; i < options2.length; i++) {
if (options2[i].dataset.option === selValue) {
sel2.appendChild(options2[i]);
}
}
}

giveSelection(sel1.value);


Natomiast html taki:

<select id="sel1" onchange="giveSelection(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="sel2">
<option data-option="a">apple</option>
<option data-option="a">airplane</option>
<option data-option="b">banana</option>
<option data-option="b">book</option>
</select>

A gdzie wrzuciłeś ten formularz.js? Na początku w head czy na koniec body? Jeśli w head i nie masz listenera na DOMContentLoaded to nie będzie działać bo nie ma jeszcze elementu do pobrania.

Działa!!! Dzięki wielkie!!!