Zależne rozwijane listy, funkcja IF Opcje

[kolenda]

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.

[kolenda]

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>