자동 채우기 두 번째 메뉴를 사용하여 계단식 드롭다운 메뉴를 만드는 방법은 무엇입니까?

계단식 드롭다운 메뉴: 첫 번째 선택을 기준으로 두 번째 메뉴 자동 채우기

이 시나리오에서는 두 개의 상호 연결된 드롭다운 메뉴를 만들고 싶습니다. 두 번째 메뉴의 옵션은 첫 번째 메뉴에서 선택한 항목에 따라 동적으로 변경됩니다.

초기 HTML 구조:

<code class="html"><select name="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 name="items">
    <!-- Options will be populated dynamically -->
</select></code>

이벤트 처리:

원하는 기능을 달성하기 위해 첫 번째 드롭다운에서 이벤트 리스너를 사용하여 선택 항목이 변경될 때 Ajax 호출을 트리거합니다.

<code class="javascript"><script type="text/javascript">
    function changeItems(categoryId) {
        $.ajax({
            url: 'process.php?category=' + categoryId,
            success: function(data) {
                $("#items").html(data);
            }
        });
    }
</script></code>

Ajax 처리 요청:

process.php 파일에서 선택한 카테고리에 따라 두 번째 드롭다운에 대한 옵션을 구성합니다.

<code class="php">$categoryId = $_GET['category'];

switch ($categoryId) {
    case 1:
        $options = array(
            'Smartphone', 'Charger'
        );
        break;
    case 2:
        $options = array(
            'Basketball', 'Volleyball'
        );
        break;
    // ...
}

foreach ($options as $option) {
    echo "<option value='$option'>$option</option>";
}</code>

두 번째 드롭다운을 동적으로 업데이트 :

Ajax 호출은 process.php에서 생성된 새 옵션으로 #items 요소를 채웁니다.

<code class="javascript">$("#items").html(data);</code>

데이터베이스 없는 사용자 정의 구현:

데이터베이스가 없는 경우 배열의 각 카테고리에 대한 옵션을 수동으로 정의하고 JavaScript를 통해 두 번째 드롭다운을 업데이트할 수 있습니다.

<code class="javascript">// Define options for each category
const categories = ['First', 'Second', 'Third', 'Fourth'];
const optionArrays = [
    ['Smartphone', 'Charger'],
    ['Basketball', 'Volleyball'],
    // ...
];

// Update second dropdown on category change
$(document).on('change', 'select[name="category"]', function() {
    const selectedCategory = $(this).val();
    const options = optionArrays[selectedCategory - 1]; // Subtract 1 to match array indices

    $('#items').empty();
    for (let i = 0; i < options.length; i++) {
        $('#items').append(`<option value="${options[i]}">${options[i]}</option>`);
    }
});</code>

위 내용은 자동 채우기 두 번째 메뉴를 사용하여 계단식 드롭다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!