Есть 3 select. Задача в организации зависимости 2-го от 1-го, 3-го от 2-го. Вроде получается, но почему-то 3-й select упорно работает только с первым option, все остальные не работают. Подскажите, где ошибка, никак не могу разобраться.
function fcat_onchange()
{
var fcat = document.getElementById("fcat");
var scat = document.getElementById("scat");
scat.selectedIndex = 0;
for (var i = 0; i < scat.childNodes.length; i++)
{
var cur = scat.childNodes.item(i);
if (cur.nodeName.toLowerCase() == "optgroup")
{
cur.style.display = cur.id == fcat.value.toLowerCase() ? "block" : "none";
}
}
}
function scat_onchange()
{
var scat = document.getElementById("scat");
var catid = document.getElementById("catid");
catid.selectedIndex = 0;
for (var j = 0; j < catid.childNodes.length; j++)
{
var cur = catid.childNodes.item(j);
if (cur.nodeName.toLowerCase() == "optgroup")
{
cur.style.display = cur.id == scat.value.toLowerCase() ? "block" : "none";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="form-control" id="fcat" onchange="return fcat_onchange()">
<option value="" selected>Выбрать из списка...</option>
<option value="r1">Отечественный опыт</option>
<option value="r2">Зарубежный опыт</option>
</select>
<label class="text-grey"><small><em>Категория</em></small></label>
</div>
</div>
<br>
<div class="col-md-3">
<div class="form-group">
<select class="form-control" id="scat" onchange="return scat_onchange()">
<option value="">Выберите категорию</option>
<optgroup label="Отечественный опыт" id="r1" hidden>
<option value="с11">Общие вопросы</option>
<option value="с12">Организационная деятельность</option>
<option value="с13">Оценка и контроль</option>
</optgroup>
<optgroup label="Зарубежный опыт" id="r2" hidden>
<option value="с21">Оценка и контроль</option>
<option value="с22">Общие вопросы</option>
<option value="с23">Организационная деятельность</option>
</optgroup>
</select>
<label class="text-grey"><small><em>Раздел</em></small></label>
</div>
</div>
<br>
<div class="col-md-6">
<div class="form-group">
<select class="form-control" id="catid" name="catid">
<option value="">Выберите раздел</option>
<optgroup label="Общие вопросы" id="с11" hidden>
<option>Оценка и контроль</option>
<option>Организационная деятельность</option>
<option>Общие вопросы</option>
</optgroup>
<optgroup label="Организационно-управленческая деятельность" id="c12" hidden>
<option>Общие вопросы</option>
<option>Оценка и контроль</option>
<option>Организационная деятельность</option>
</optgroup>
<optgroup label="Оценка и контроль" id="c13" hidden>
<option>Организационная деятельность</option>
<option>Общие вопросы</option>
<option>Оценка и контроль</option>
</optgroup>
<optgroup label="Общие вопросы" id="с21" hidden>
<option>Организационная деятельность</option>
<option>Общие вопросы</option>
<option>Оценка и контроль</option>
</optgroup>
<optgroup label="Организационно-управленческая деятельность" id="c22" hidden>
<option>Общие вопросы</option>
<option>Организационная деятельность</option>
<option>Оценка и контроль</option>
</optgroup>
<optgroup label="Оценка и контроль" id="c23" hidden>
<option>Оценка и контроль</option>
<option>Общие вопросы</option>
<option>Организационная деятельность</option>
</optgroup>
</select>
<label class="text-grey"><small><em>Рубрика</em></small></label>
</div>
</div>
</div>