Как создать оператор switch / case с идентификатором div в качестве параметра case?

Question

Я пытаюсь создать раскрывающийся список, который будет показывать разные результаты в зависимости от выбранного раскрывающегося списка. Вот мой минимальный пример для воспроизведения:

let elem = document.getElementById("dropdown");
elem.onchange = function(){
  if /*this is where I'm stuck. And on the following code. I want to say if the dropdown id = 1, 
  then show div option1_result*/
    let hiddenDiv = document.getElementById("option1_result");
    hiddenDiv.style.display = (this.value == "") ? "none":"block";
};

<p>
Please select the dropdown:
</p>
<select id = "dropdown">
  <option id = "1" class = "selected"> option 1</option>
  <option id = "2" class = "selected"> option 2</option>
</select>

<div class = "result">
  <div class = "option1_result" style="display:none;">
    <p>
      Option 1 Result! 
      <button href="#">
      See More
      </button>
    </p>
  </div>
  <div class = "option2_result" style = "display:none;">
    <p>
      Option 2 result
      <button href="#">
      More about opt 2
      </button>
    </p>
  </div>
</div>

В идеале я бы хотел сделать это где

case (1):
  hiddenDiv.style.display = "block";

Но я не уверен, что это сработает в данном случае.

JSFiddle

Answer 1

Атрибут id предназначен для однозначной идентификации элемента в документе. Он не предназначен для передачи значения значения параметра выбора. Для этого вы хотите использовать атрибут value:

<select id="dropdown">
  <option value="1" class="selected">option 1</option>
  <option value="2" class="selected">option 2</option>
</select>

Когда у вас есть значение для ваших опций, вы можете проверить, какое выбранное значение выглядит следующим образом:

if (elem.value === '1') {
  // ...
}

Answer 2

В дополнение к ответу @Jacob, кажется, вам также следует указать id not class для параметров результата.

ID может использоваться для идентифицировать один элемент, тогда как класс может использоваться для идентификации более чем одного

и для очистки ваших опций всякий раз, когда вы выбираете другие опции, в onchange

Array.from(document.getElementsByClassName("result")[0].children, (child) => child.style.display = "none")

иначе опции будут накапливаться .

Также вы можете избежать использования оператора if в вашем случае. Используйте шаблонные литералы .

const elem = document.getElementById("dropdown");
elem.addEventListener("change", () => {
  Array.from(document.getElementsByClassName("result")[0].children, (child) => child.style.display = "none")
  const hiddenDiv = document.getElementById(`option${elem.value}_result`);
  hiddenDiv.style.display = "block"
})
const hiddenDiv = document.getElementById(`option${elem.value}_result`);
  hiddenDiv.style.display = "block"

<p>
  Please select the dropdown:
</p>
<select id="dropdown">
  <option value="1" class="selected"> option 1</option>
  <option value="2" class="selected"> option 2</option>
</select>

<div class="result">
  <div id="option1_result" style="display:none;">
    <p>
      Option 1 Result!
      <button href="#">
      See More
      </button>
    </p>
  </div>
  <div id="option2_result" style="display:none;">
    <p>
      Option 2 result
      <button href="#">
      More about opt 2
      </button>
    </p>
  </div>
</div>