如何使用子parentnode将此javascript编码到jquery中？

我是jquery新手，我想转换包含两个select标记的javascript代码，一个是main，另一个是sub，单击main中的不同选项将显示不同的sub-select标记，因为我所有的select标记都设置为none，但我不知道如何构造jquery

这是我的选择标签的HTML

   <select name="category" id="c_type" onchange="selectChoice()">
     <option value=""></option>
     <option value="Learning Environment">Learning Environment</option>
     <option value="Learning Support">Learning Support</option>
     <option value="Technology Support">Technology Support</option>
     <option value="Wellness">Wellness, Health, and Nutrition</option>
    <option value="Training">Training and Skills Development</option>
    <option value="Financial">Financial Support and Subsidy</option>
    <option value="Assistive">Assistive Learning Devices for Students with Special Needs</option>

   </select>
   <select name="specifics1" id="LE" style="display:none">
     <option value=""></option>
     <option value="Classroom">Classroom</option>
     <option value="Laboratory Room">Laboratory Room</option>
   </select>
   <select name="specifics2" id="LS" style="display:none">
     <option value=""></option>
     <option value="Lab Equipments">Lab Equipments</option>
     <option value="School Supplies">School Supplies</option>
   </select>
   <select name="specifics3" id="TS" style="display:none">
     <option value=""></option>
    <option value="Computer Units">Computer Units</option>
    <option value="Internet">Internet Connectivity</option>
    </select>
    <select name="specifics4" id="WT" style="display:none">
     <option value=""></option">
    <option value="Feeding">Feeding Program</option>
    <option value="Medical Kits">Medical Kits</option>
    </select>
    <select name="specifics5" id="TAD" style="display:none">
    <option value=""></option>
    <option value="Pupil Training">Student/Pupil Training</option>
    <option value="Literacy Training">Literacy Training</option>
    </select>
    <select name="specifics6" id="FIN" style="display:none">
    <option value=""></option>
    <option value="Fare">Fare</option>
    <option value="Meals">Meals</option>
    </select>
    <select name="specifics7" id="ASL" style="display:none">
    <option value=""></option>
    <option value="Braile">Braile</option>
    <option value="Hearing Aids">Hearing Aids</option>
    </select>

---

看看它，我有7个子选择标记，具有不同的选择名称和ID，所以它可能会很长，但它可以工作，我想要的是使用jquery缩短它，但我不知道如何缩短它，

IMHO这里是编写类似代码的最短方法，并且更易于维护

常量类别=[ {类型：'Learning Environment'，参考号：'LE'，规格：['教室'，'实验室']} ，{类型：'Learning Support'，参考号：'LS'，规格：['Lab Equipment'，'School Supplies']} ，{type:'Technology Support'，ref:'TS'，specs:['Computer Units'，'Internet Connectivity']} ，{类型：'Wellness，Health，and Nutrition'，参考文献：'WT'，规格：['Feeding Program'，'Medical Kits'] ，{类型：'Training and skill Development'，参考号：'TAD'，规格：['Student/Student Training'，'识字培训']} ，{类型：'财政支持和补贴'，参考号：'FIN'，规格：['票价'，'膳食']} ，{类型：'有特殊需要的学生的辅助学习设备'，参考：'ASL'，规格：['Braile'，'助听器]} ]; const Select_category=document.querySelector'c_type' ，选择_specs=document.querySelector'specs' ; //加载时的首次初始化。。。 设项=0； 选择_category[item++]=new选项，； 对于类别的let cat { 选择_category[item++]=newoptioncat.type，cat.ref； } // ... 结束初始化。 选择_category.onchange=函数 { 选择_specs.innerHTML=null； 如果选择_category.value=={ 选择_specs.classList.添加'noDisplay'； } 其他的 { 设项=0； 选择_specs[item++]=new选项，； Category.findcat=>cat.ref==Select\u Category.value.specs.forEachspec，index=>{ 选择_specs[item++]=新选项spec，index； } 选择_specs.classList。删除'noDisplay'； } } .noDisplay{display:none；}

---

您使用jQuery的目的是为了使用jQuery，这可能是个坏主意，还是仅仅为了缩短代码？@CertainPerformance-我的教授说使用jQuery来缩短代码，为什么不好？jQuery不会使代码缩短很多。如果你只是在学习，了解内置JS的工作原理比了解特定库（如jQuery）的语法更有用，你说你有7个子选择标记，但我只看到2个，你能发布更多的代码吗，这样我们就可以看到是否有一个更大的模式，从中逻辑可能是短启用的？注意，如果这段代码已经工作了，那么这是一个比这里更重要的问题。关于收紧/优化等的问题。当你的代码正常工作，但你被告知要清理它时，你肯定会在那里问一些问题。

function selectChoice(){
 var main = document.getElementById("c_type").value;
 var s1 = document.getElementById("LE");
 var s2 = document.getElementById("LS");
 var s3 = document.getElementById("TS");
 var s4 = document.getElementById("WT");
 var s5 = document.getElementById("TAD");
 var s6 = document.getElementById("FIN");
 var s7 = document.getElementById("ASL");
 if(main === "Learning Environment"){
    s1.style.display = "block";
    s2.style.display = "none";
    s3.style.display = "none";
    s4.style.display = "none";
    s5.style.display = "none";
    s6.style.display = "none";
    s7.style.display = "none";
    s1.required = true;
    s2.required = false;
    s3.required = false;
    s4.required = false;
    s5.required = false;
    s6.required = false;
    s7.required = false;
    s1.selectedIndex = 0;
    s2.selectedIndex = 0;
    s3.selectedIndex = 0;
    s4.selectedIndex = 0;
    s5.selectedIndex = 0;
    s6.selectedIndex = 0;
    s7.selectedIndex = 0;

}else if(main === "Learning Support"){
    s1.style.display = "none";
    s2.style.display = "block";
    s3.style.display = "none";
    s4.style.display = "none";
    s5.style.display = "none";
    s6.style.display = "none";
    s7.style.display = "none";
    s1.required = false;
    s2.required = true;
    s3.required = false;
    s4.required = false;
    s5.required = false;
    s6.required = false;
    s7.required = false;
    s1.selectedIndex = 0;
    s2.selectedIndex = 0;
    s3.selectedIndex = 0;
    s4.selectedIndex = 0;
    s5.selectedIndex = 0;
    s6.selectedIndex = 0;
    s7.selectedIndex = 0;

}else if(main === "Technology Support"){
    s1.style.display = "none";
    s2.style.display = "none";
    s3.style.display = "block";
    s4.style.display = "none";
    s5.style.display = "none";
    s6.style.display = "none";
    s7.style.display = "none";
    s1.required = false;
    s2.required = false;
    s3.required = true;
    s4.required = false;
    s5.required = false;
    s6.required = false;
    s7.required = false;
    s1.selectedIndex = 0;
    s2.selectedIndex = 0;
    s3.selectedIndex = 0;
    s4.selectedIndex = 0;
    s5.selectedIndex = 0;
    s6.selectedIndex = 0;
    s7.selectedIndex = 0;

}}