IE에서 JQuery로 계단식 드롭다운을 채우는 방법은 무엇입니까?

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

문제:

보다 대화형 사용자 환경을 만들기 위해 다음을 원합니다. 상위 드롭다운에서 선택한 항목에 따라 동적으로 옵션으로 드롭다운을 채웁니다. JavaScript를 사용하여 이 작업을 시도했지만 IE에서 호환성 문제에 직면했습니다.

해결책:

호환성을 높이고 구현을 단순화하려면 다음을 변환해 보겠습니다. JavaScript 코드를 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>

설명:

• 각 국가의 가능한 모든 위치를 저장하는 위치 개체를 정의합니다. .
• 국가 드롭다운이 변경되면 Change() 이벤트 핸들러가 트리거됩니다.
• locations 객체에서 선택한 국가와 해당 위치 배열을 검색합니다.
• 사용 JQuery의 $.map() 함수를 사용하여 위치를 나타내는 HTML 옵션 문자열을 생성합니다.
• 마지막으로 생성된 HTML 옵션으로 #location 드롭다운을 채웁니다.

데모:

Fiddle에서 라이브 데모를 사용해 보세요: https://jsfiddle.net/HvXSz/.

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