Как я могу динамически настраивать варианты выпадающего меню на основе двух других вариантов выпадающего списка?

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, которого они не видят. Вы можете использовать value для более уникальной идентификации бренда, используя значение «HP-Laptop» или «HP-Switch» вместо просто «HP» в качестве значения бренда.

С этими идеями ввозражаю, я бы предложил изменить вашу функцию так:

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