在级联下拉列表变量中声明数组 javascript

Question

我是初学者，我不知道如何完成这项工作。我不确定我说的是否正确，但我必须在另一个变量中声明一个数组，这样当一个人单击一个下拉列表中的值时，与该值相关的值会显示在下一个下拉列表中。现在，这些值甚至不会显示在下拉列表中。任何帮助将不胜感激。

var subjectObject = {
  "Serif": [
    "Times New Roman",
    "Georgia",
    "Garamound"
  ],
  "Sans-serif": [
    "Arial",
    "Verdana",
    "Helvetica"
  ],
  "Monospace": [
    "Courier New",
    "Lucida Console",
    "Monaco"
  ],
  "Cursive": [
    "Brush Script MT",
    "Lucida Handwriting"
  ],
  "Fantasy": [
    "Copperplate",
    "Papyrus"
  ]
};


window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {    //empty Chapters- and Topics- dropdowns
       
    topicSel.length = 1;
    //display correct values
    for (var y of subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    var changeFontStyle = function(font) {
      document.getElementById(
        "demo").style.fontFamily = font.value; 
    }
  }
}

<p id="demo"> HEIIDXCD </p>
<form name="form1" id="form1" action="/action_page.php">
  Font Family:
  <select name="subject" id="subject">
    <option value="" selected="selected">Select Font Family</option>
  </select>
  <br><br> Font Names:
  <select name="topic" id="topic" onchange="changeFontStyle (this);">
    <option value="" selected="selected">Please select font family first</option>
  </select>
  <br><br>
</form>

Answer 1

一种方法...
（表单和表单元素不需要使用 ID 属性）

const
  pDemo = document.querySelector('p#demo')
, formOne = document.forms.form1
, subjectObject = 
  { 'Serif'      : [ 'Times New Roman', 'Georgia', 'Garamound' ] 
  , 'Sans-serif' : [ 'Arial', 'Verdana', 'Helvetica' ] 
  , 'Monospace'  : [ 'Courier New', 'Lucida Console', 'Monaco' ] 
  , 'Cursive'    : [ 'Brush Script MT', 'Lucida Handwriting' ] 
  , 'Fantasy'    : [ 'Copperplate', 'Papyrus' ] 
  };
for (let font in subjectObject)
  {
  formOne.subject.add( new Option(font,font))
  }
formOne.subject.onchange =_=>
  {
  formOne.topic.length = 1
  formOne.topic.value  = ''
  pDemo.textContent    = ' HEIIDXCD '
  for( let fontName of subjectObject[formOne.subject.value])
    {
    formOne.topic.add( new Option(fontName,fontName))
    }
  }
formOne.topic.onchange =_=>
  {
  pDemo.textContent      = formOne.subject.value + ' / ' + formOne.topic.value
  pDemo.style.fontFamily = formOne.topic.value; 
  }

<p id="demo"> HEIIDXCD </p>
<form name="form1" action="/action_page.php">
  Font Family:
  <select name="subject" >
    <option value="" selected disabled>Select Font Family</option>
  </select>
  <br><br> Font Names:
  <select name="topic" >
    <option value="" selected disabled>Please select font family first</option>
  </select>
  <br><br>
</form>

在级联下拉列表变量中声明数组 javascript

Declaring array within variable for cascading dropdown javascript

html

javascript

cascadingdropdown