첫 번째 드롭다운 메뉴의 선택 사항을 기반으로 두 번째 드롭다운 메뉴의 옵션을 자동 업데이트하는 방법은 무엇입니까?

첫 번째 드롭다운 메뉴 두 번째 드롭다운 메뉴의 옵션 자동 업데이트

문제 설명:

두 개의 드롭 개발- 두 번째 드롭다운 메뉴의 옵션은 첫 번째 드롭다운 메뉴에서 선택한 항목에 따라 달라집니다. 이 기능은 데이터베이스를 활용하지 않고 원하는 것입니다.

해결책:

초기 HTML:

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<select id="items">
</select></code>

JavaScript:

첫 번째 드롭다운 메뉴의 변경 이벤트를 처리하는 함수를 정의하고 이에 따라 두 번째 드롭다운 메뉴의 옵션을 업데이트합니다.

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option>
<option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option>
<option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

설명:

이 예에서 두 번째 드롭다운 메뉴의 옵션은 JavaScript 함수 내에 하드코딩되어 있습니다. 사용자가 첫 번째 드롭다운 메뉴에서 카테고리를 선택하면 변경 이벤트가 JavaScript 기능을 트리거합니다. 선택한 카테고리에 따라 이 기능은 두 번째 드롭다운 메뉴의 옵션을 동적으로 업데이트합니다.

위 내용은 첫 번째 드롭다운 메뉴의 선택 사항을 기반으로 두 번째 드롭다운 메뉴의 옵션을 자동 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!