> 웹 프론트엔드 > JS 튜토리얼 > IE에서 JQuery로 계단식 드롭다운을 채우는 방법은 무엇입니까?

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

Mary-Kate Olsen
풀어 주다: 2024-10-28 16:52:02
원래의
533명이 탐색했습니다.

How to Populate a Cascading Dropdown with JQuery in IE?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿