时间戳

首页 > 解决方案 > JS类别子类别 - 选择类别时隐藏子类别的值

javascript - JS类别子类别 - 选择类别时隐藏子类别的值

问题描述

我得到了[类别]和[子类别]。如果用户选择 [category-option(1)]，则从 [subcategory] ​​中隐藏一些值。

这是来自学校项目，我们希望有两个用于上传文件的选择选项，但在某些课程中，例如（5 年级的某些科目与 6 年级不同）。于是我想到了这个简单的想法。以 HTML 格式存储所有课程/科目，然后如果用户点击 5 年级，则隐藏一些他们没有学习的科目。但是，如果用户单击 7gr 以显示在那里学习的主题。

<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>

标签： javascriptphphtml

解决方案

您可以嵌套两个数组，以便每个类别都有自己的子类别。那么你就不需要隐藏什么了。外部“类别”数组应该定义为一个对象（它比关联数组容易得多），内部“子类别”数组可以是普通的索引数组。

例如：

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

如果你想获得 'subcategory' 数组及其 5 年级的条目，你可以这样做：

var subCat5thGrade = category["5thGrade"]

您可以收听“类别”选择的onchange事件。然后，您将从“sub_category”选择中删除旧选项，为所选类别的子类别的每个条目添加来自第一个选择的克隆选项并更新其值和文本。

工作示例：

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：在您的 html 代码中是双 ID（optgroup）-我更改了它们...

推荐阅读