JS category subcategory – hide value from subcat when category is selected [closed]

I got [category] and [subcategory]. If user select [category-option(1)], then hide some value from [subcategory].

This is from school project where we want to have two select options for uploading files, but in some classes like (5th grade some subjects are different from 6th grade). So I thought of this simple idea. Store all classes/subjects in HTML, then if user clicks on 5th grade hide some subjects that they don’t learn. But if user clicks 7gr to display subjects that are learned there.

<div class="input-group mb-3">
    <select class="custom-select" id="category" name="category" label="x">
        <optgroup label="Изберете клас" id="category" name="category">  
            <option value="5">5 клас</option>
            <option value="6">6 клас</option>
            <option value="7">7 клас</option>
            <option value="8">8 клас</option>
            <option value="9">9 клас</option>
            <option value="10">10 клас</option>
            <option value="11">11 клас</option>
            <option value="12">12 клас</option>
        </optgroup>
    </select>
    <select class="custom-select" id="sub_category" name="sub_category">
        <optgroup label="Изберете Предмет" id="sub_category" name="sub_category">
            <option value="ФИЗИКА">ФИЗИКА</option> 
            <option value="БИОЛОГИЯ">БИОЛОГИЯ</option>
            <option value="МАТЕМАТИКА">МАТЕМАТИКА</option> 
            <option value="ИСТОРИЯ">ИСТОРИЯ</option>
            <option value="ХИМИЯ">ХИМИЯ</option> 
            <option value="АНГЛИЙСКИ">АНГЛИЙСКИ</option>
            <option value="ИНФОРМАТИКА">ИНФОРМАТИКА</option> 
            <option value="ТЕХНОЛОГИЙ">ТЕХНОЛОГИЙ</option>
        </optgroup>
    </select>
    <div class="input-group-append">
        <button class="btn btn-success" type="submit">Качи</button>
    </div>      
</div>

Answer

You could nest the two arrays, so that each category has its own subcategory. Then you wouldn’t need to hide something. The outer ‘category’ array should be defined as an object (its far easier than an associative array) and the inner ‘subcategory’ arrays could be ordinary indexed arrays.

For example:

var category = {
    "5thGrade": [subject1, subject2, subject3],
    "6thGrade": [subject1, subject4, subject6]
};

If you want to get the ‘subcategory’ array with its entries for the 5th grade you could do:

var subCat5thGrade = category["5thGrade"]

You can listen to the onchange event of the ‘category’ select. Then you would delete the old options from the ‘sub_category’ select, add for each entry of the subcategory for the selected category a cloned option from the first select and update its value and text.

Working example:

var category = {
    "5 клас": ["МАТЕМАТИКА", "ИСТОРИЯ"],
    "6 клас": ["МАТЕМАТИКА", "ИСТОРИЯ", "БИОЛОГИЯ"],
    "7 клас": ["МАТЕМАТИКА", "БИОЛОГИЯ", "MУЗЫКА"],
    "8 клас": ["МАТЕМАТИКА", "БИОЛОГИЯ", "ФИЗИКА"],
    "9 клас": ["МАТЕМАТИКА", "ФИЗИКА", "ХИМИЯ"],
    "10 клас": ["МАТЕМАТИКА", "ФИЗИКА", "ХИМИЯ", "AСТPОНОMИЯ"],
    "11 клас": ["МАТЕМАТИКА", "ФИЗИКА", "ХИМИЯ", "ТЕХНОЛОГИЙ"],
    "12 клас": ["МАТЕМАТИКА", "ФИЗИКА", "ХИМИЯ", "ИНФОРМАТИКА", "ТЕХНОЛОГИЙ"]
};
var classGrade = document.getElementById('category');
var subjects = document.getElementById('sub_categories');

classGrade.onchange = function() {
    var catValue = this.value;
    subjects.innerHTML = '';
    
    for(key in category[catValue]) {
        var clone = classGrade.getElementsByTagName('option')[0].cloneNode( true );
        var subValue = category[catValue][key];

        clone.value = subValue;
        clone.innerText = subValue;
        
        subjects.appendChild( clone );
    }
};

<div class="input-group mb-3">
    <select class="custom-select" id="category" name="category" label="x">
        <optgroup label="Изберете клас" id="categories" name="categories">  
            <option value="5 клас">5 клас</option>
            <option value="6 клас">6 клас</option>
            <option value="7 клас">7 клас</option>
            <option value="8 клас">8 клас</option>
            <option value="9 клас">9 клас</option>
            <option value="10 клас">10 клас</option>
            <option value="11 клас">11 клас</option>
            <option value="12 клас">12 клас</option>
        </optgroup>
    </select>
    <select class="custom-select" id="sub_category" name="sub_category">
        <optgroup label="Изберете Предмет" id="sub_categories" name="sub_categories">
            <option value="МАТЕМАТИКА">МАТЕМАТИКА</option> 
            <option value="ИСТОРИЯ">ИСТОРИЯ</option>
        </optgroup>
    </select>
    <div class="input-group-append">
        <button class="btn btn-success" type="submit">Качи</button>
    </div>      
</div>

PS: In your html code were double ids (optgroup) – i changed them…