jQuery를 사용하여 계단식 드롭다운을 동적으로 채우는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-03 03:13:29

원래의

508명이 탐색했습니다.

How to Dynamically Populate Cascading Dropdowns with 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>

로그인 후 복사