JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<p>
<label for="edit-megye">Megye</label>
<select name="megye" id="edit-megye">
<option value="0">Egész ország</option>
<option value="1">Bács-Kiskun</option>
<option value="2">Baranya</option>
<!-- ide jön a többi megye -->
</select>
</p>
<p>
<label for="edit-telepules">Település</label>
<select name="telepules" id="edit-telepules">
<option value="0">Minden település</option>
<option value="1-1">Kecskemét</option>
<option value="1-2">Kiskőrös</option>
<option value="2-1">Mohács</option>
<option value="2-2">Pécs</option>
<!-- ide jön az összes település -->
</select>
</p>
</form>
JavaScript
(function (megye, telepules) {
var telepulesek = {}, defaultItem, ol, i, option, frag;
if (megye && telepules) {
for (i = 0, ol = telepules.options.length; i < ol; i += 1) {
option = telepules.options[i];
frag = option.value && option.value.split('-', 2);
if (frag.length === 2) {
frag = frag[0];
if (!(frag in telepulesek)) {
telepulesek[frag] = [];
}
telepulesek[frag].push({value: option.value, text: option.text});
}
if (option.value === '0') {
defaultItem = {value: option.value, text: option.text};
}
}
megye.selectedIndex = 0;
megye.onchange = function () {
var options, i, ol, option;
telepules.parentNode.style.display = megye.value === '0' ? 'none' : 'block';
if (telepulesek[megye.value]) {
telepules.innerHTML = '';
option = document.createElement('option');
option.value = defaultItem.value;
option.text = defaultItem.text;
option.selected = true;
telepules.add(option, null);
options = telepulesek[megye.value];
for (ol = options.length, i = 0; i < ol; i += 1) {
option = document.createElement('option');
option.value = options[i].value;
option.text = options[i].text;
telepules.add(option, null);
}
telepules.focus();
}
};
telepules.parentNode.style.display = 'none';
}
}(document.getElementById('edit-megye'), document.getElementById('edit-telepules')));