带有多选选项的级联下拉菜单

问题描述

我用三个选项构建了我的级联下拉菜单，我需要第二个选项有多项选择，但如果我放多个选项，它太丑了，我可以帮我选一个吗，我在 wordpress 上做的，但是我用这个脚本生成所有

var subjectObject = {
  "Front-end": {
    "HTML": ["Links","Images","Tables","Lists"],"CSS": ["Borders","Margins","Backgrounds","Float"],"JavaScript": ["Variables","Operators","Functions","Conditions"]    
  },"Back-end": {
    "PHP": ["Variables","Strings","Arrays"],"sql": ["SELECT","UPDATE","DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x,x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y,y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i],z[i]);
    }
  }
}

Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
 
Topics: <select name="topic" id="topic" multiple>
    <option value="" selected="selected"  >Please select subject first</option>
  </select>
  <br><br>
Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>

我想要这个解决方案，但我无法实现，可能是因为列表是由 JS 生成的。

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）