如何基于其他2个较早的下拉选项动态调整下拉选项？

Question

我有3个下拉菜单：

• 名称（设备名称的静态列表-Switch和Laptop）
• 品牌（此处选择取决于所选择的名称）
• 模型（此处选择根据所选择的模型而改变）

我的问题是Switch和Laptop都具有相同的Brand=HP，但具有不同的Model选择。我需要进行switch的情况，其中Model的选项将取决于Name Brand的选择。

我已经尝试过这种类型的case语句，但是它不起作用：

case Device_Name=="Laptop" && Device_Brand=="HP": 
  document.getElementById("Model").options[0] = new Option( "--Select--", "" ); 
  document.getElementById("Model").options[1] = new Option( "Spectre x360", "Spectre x360" ); 
  document.getElementById("Model").options[2] = new Option( "Spectre Folio", "Spectre Folio" ); 
  break;

这里是我编写的用于动态更改下拉内容的函数：

function dynamicdropdown(listindex) {
  switch (listindex) {
    case "Laptop":
      document.getElementById("Device_Brand").options[0] = new Option( "--Select--", "" );
      document.getElementById("Device_Brand").options[1] = new Option( "Acer", "Acer" );
      document.getElementById("Device_Brand").options[2] = new Option( "HP", "HP" );
      document.getElementById("Device_Brand").options[3] = new Option( "Lenovo", "Lenovo" ); 
      break;
    case "Switch": 
      document.getElementById("Device_Brand").options[0] = new Option( "--Select--", "" );
      document.getElementById("Device_Brand").options[1] = new Option("Cisco System", "Cisco System" );
      document.getElementById("Device_Brand").options[2] = new Option( "Allied Telesis", "Allied Telesis" );
      document.getElementById("Device_Brand").options[3] = new Option( "HP", "HP" );
      break;
    case "Acer":
      document.getElementById("Model").options[0] = new Option( "--Select--", "" );
      document.getElementById("Model").options[1] = new Option( "Aspire E 14", "Aspire E 14" );
      document.getElementById("Model").options[2] = new Option("Nitro 5 AN515-43-R19V", "Nitro 5 AN515-43-R19V" );
      document.getElementById("Model").options[3] = new Option("Aspire 3 A314-32", "Aspire 3 A314-32" );
      break;
    case "HP":
      document.getElementById("Model").options[0] = new Option( "--Select--", "" );
      document.getElementById("Model").options[1] = new Option( "Spectre x360", "Spectre x360" );
      document.getElementById("Model").options[2] = new Option( "Spectre Folio", "Spectre Folio" );
      document.getElementById("Model").options[3] = new Option( "Chromebook 14.", "Chromebook 14." );
      document.getElementById("Model").options[4] = new Option( "Series Switch JD320B", "Series Switch JD320B" );
      document.getElementById("Model").options[5] = new Option( "J9729A", "J9729A" );
      document.getElementById("Model").options[6] = new Option( "H3C S3100", "H3C S3100" );
      break;
    case "Lenovo":
      document.getElementById("Model").options[0] = new Option( "--Select--", "" );
      document.getElementById("Model").options[1] = new Option( "Legion Y720", "Legion Y720" );
      document.getElementById("Model").options[2] = new Option( "Miix 320", "Miix 320" );
      document.getElementById("Model").options[3] = new Option( "Yoga 720", "Yoga 720" );
      break;
    case "Cisco System":
      document.getElementById("Model").options[0] = new Option( "--Select--", "" );
      document.getElementById("Model").options[1] = new Option( "Catalyst 2960 Series", "Catalyst 2960 Series" );
      break;
    case "Allied Telesis":
      document.getElementById("Model").options[0] = new Option( "--Select--", "" );
      document.getElementById("Model").options[1] = new Option( "AT-MR820T", "AT-MR820T" );
      break;
  }
  return true;
}

这里是我正在使用的html结构：

<div class="row">
  <div class="col-25">
    <label for="">Device Name</label>
  </div>
  <div class="col-75">
    <div class="category_div" id="category_div">
      <select
        id="Device_Name"
        name="Device_Name"
        onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"
      >
        <option value="" disabled selected>--Select--</option>
        <option value="Laptop">Laptop</option>
        <option value="Switch">Switch</option>
      </select>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label for="">Brand</label>
  </div>
  <div class="col-75">
    <div class="sub_category_div" id="sub_category_div">
      <select
        id="Device_Brand"
        name="Device_Brand"
        onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"
      >
        <option value="" disabled selected>--Select--</option>
      </select>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label for="">Model</label>
  </div>
  <div class="col-75">
    <div class="sub_sub_category_div" id="sub_sub_category_div">
      <select id="Model" name="Model">
        <option value="" disabled selected>--Select--</option>
      </select>
    </div>
  </div>
</div>

Answer 1

case语句必须是与switch语句参数进行比较的值，而不是您尝试的表达式。您可以将这两个值组合在一起以创建一个新的值，该值可以唯一地标识情况。另外，最好使用局部变量来简化代码并使其更易于阅读/理解。

[请记住，使用Option对象指定了用户将看到的text，而他们没有看到的value。您可以通过使用[HP-Laptop]或“ HP-Switch”的值而不是仅使用“ HP”作为品牌价值，来使用value来更独特地标识品牌。

考虑到这些想法，我建议您将功能更改为如下所示：

function dynamicBrandDropdown(dropdownID, choice) {
  // finding the element once is more efficient than doing it multiple times
  const dropdown = document.getElementById(dropdownID);
  dropdown.options[0] = new Option("--Select--", "");
  // Put "-Laptop" or "-Switch" as part of each Brand's option value
  switch (choice) {
    case "Laptop":
      dropdown.options[1] = new Option("Acer", "Acer-Laptop");
      dropdown.options[2] = new Option("HP", "HP-Laptop");
      dropdown.options[3] = new Option("Lenovo", "Lenovo-Laptop");
      break;
    case "Switch":
      dropdown.options[1] = new Option("Cisco System", "Cisco-Switch");
      dropdown.options[2] = new Option("Allied Telesis", "Allied-Switch");
      dropdown.options[3] = new Option("HP", "HP-Switch");
      break;
    case "Acer-Laptop":
      dropdown.options[1] = new Option("Aspire E 14", "Aspire E 14");
      dropdown.options[2] = new Option("Nitro 5 AN515-43-R19V", "Nitro 5 AN515-43-R19V");
      dropdown.options[3] = new Option("Aspire 3 A314-32", "Aspire 3 A314-32");
      break;
    case "HP-Laptop":
      dropdown.options[1] = new Option("Spectre x360", "Spectre x360");
      dropdown.options[2] = new Option("Spectre Folio", "Spectre Folio");
      dropdown.options[3] = new Option("Chromebook 14.", "Chromebook 14.");
      break;
    case "HP-Switch":
      dropdown.options[1] = new Option("Series Switch JD320B", "Series Switch JD320B");
      dropdown.options[2] = new Option("J9729A", "J9729A");
      dropdown.options[3] = new Option("H3C S3100", "H3C S3100");
      break;
    case "Lenovo-Laptop":
      dropdown.options[1] = new Option("Legion Y720", "Legion Y720");
      dropdown.options[2] = new Option("Miix 320", "Miix 320");
      dropdown.options[3] = new Option("Yoga 720", "Yoga 720");
      break;
    case "Cisco-Switch":
      dropdown.options[1] = new Option("Catalyst 2960 Series", "Catalyst 2960 Series");
      break;
    case "Allied-Switch":
      dropdown.options[1] = new Option("AT-MR820T", "AT-MR820T");
      break;
  }
}