데이터베이스 없이 첫 번째 드롭다운 선택을 기반으로 드롭다운 옵션을 자동으로 업데이트하는 방법은 무엇입니까?

데이터베이스를 사용하지 않고 첫 번째 드롭다운의 선택 항목을 기반으로 두 번째 드롭다운의 옵션을 자동으로 업데이트하는 방법

두 개의 드롭다운이 있습니다. 옵션은 데이터베이스에서 검색되지 않습니다. 첫 번째 드롭다운에서는 사용자가 카테고리를 선택할 수 있습니다. 두 번째 드롭다운의 옵션은 첫 번째 드롭다운의 선택에 따라 달라집니다.

예를 들어 사용자가 첫 번째 드롭다운에서 첫 번째 옵션을 선택한 경우 두 번째 드롭다운에는 스마트폰과 충전기. 사용자가 선택 항목을 두 번째 옵션으로 변경하면 이제 두 번째 드롭다운에 농구 및 배구 옵션이 표시됩니다.

데이터베이스를 사용하지 않고 구현

<select name="category" onchange="changeSecondDropdown(this)"><p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

로그인 후 복사

<script><p>functionchangeSecondDropdown(category) {<br> const 옵션 = {<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&quot;1&quot;: [&quot;Smartphone&quot;, &quot;Charger&quot;], &quot;2&quot;: [&quot;Basketball&quot;, &quot;Volleyball&quot;]</pre><div class="contentsignin">로그인 후 복사</div></div>};<p></p>// 두 번째 드롭다운에서 옵션 지우기<p> const itemsDropdown = document.getElementById("items");<br> itemsDropdown.innerHTML = "";<br></p>// 선택한 카테고리를 기반으로 새 옵션 추가<p> const selectedOptions = options[category.value];<br> for (const option of selectedOptions) {<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const newOption = document.createElement(&quot;option&quot;); newOption.value = option; newOption.textContent = option; itemsDropdown.appendChild(newOption);</pre><div class="contentsignin">로그인 후 복사</div></div>}<p>}<br></script>

이 구현에서는 JavaScript 개체를 사용하여 각 카테고리에 대한 옵션을 저장합니다. 사용자가 첫 번째 드롭다운에서 선택 항목을 변경하면 선택된 카테고리에 따라 두 번째 드롭다운의 옵션을 업데이트하는changeSecondDropdown 함수가 호출됩니다.

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