jQuery를 사용하여 계단식 드롭다운을 동적으로 채우는 방법은 무엇입니까?

jQuery로 계단식 드롭다운 채우기

문제

두 개의 드롭다운(국가 및 도시)이 있는 양식을 생성하려면 이를 동적으로 만들어야 합니다. 선택한 국가의 도시만 표시됩니다. 더 나은 호환성을 위해 JavaScript를 jQuery로 변환했지만 여전히 몇 가지 문제에 직면해 있습니다.

원본 JavaScript

<code class="javascript">function populate(s1, s2) {
    var optionArray;
    switch (s1.value) {
        case "Germany":
            optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
            break;
        // ... more cases
        default:
            optionArray = ["|"];
    }

    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}</code>

jQuery 솔루션

다음 jQuery 코드 원하는 결과를 얻습니다.

<code class="javascript">jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return `<option value="${lcn}">${lcn}</option>`
        }).join('');
        $locations.html(html)
    });
});</code>

작동 방식

이 코드는 국가-도시 관계를 위치 객체에 저장합니다. 국가 드롭다운이 변경되면 변경 이벤트 핸들러는 선택한 국가를 가져오고 위치 개체에서 해당 도시를 검색합니다. 그런 다음 도시에 대한 HTML 옵션을 구성하고 위치 드롭다운의 콘텐츠를 바꿉니다.

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