Зависимые друг от друга select

Есть 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>


Ответы (1 шт):

Автор решения: Igor

Буквы с и c - из разных алфавитов. Используйте какую-нибудь другую букву, которую труднее перепутать. Например, o :).

→ Ссылка