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

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

문제 설명:

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

해결책:

초기 HTML:

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

&lt;select id=&quot;items&quot;&gt;
&lt;/select&gt;</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 = '&lt;option value=&quot;3&quot;&gt;Smartphone&lt;/option&gt;&lt;option value=&quot;8&quot;&gt;Charger&lt;/option&gt;';
      break;
    case "2":
      items.innerHTML = '&lt;option value=&quot;1&quot;&gt;Basketball&lt;/option&gt;&lt;option value=&quot;4&quot;&gt;Volleyball&lt;/option&gt;';
      break;
    default:
      break;
  }
});</code>

설명:

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

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