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

문제:

동적 드롭다운을 생성하려고 합니다. JQuery를 사용하여 두 개의 드롭다운(국가 및 도시)이 있는 양식을 작성하여 선택한 국가에 해당하는 도시만 도시에 표시되도록 합니다. dropdown.

원래 JavaScript 코드:

원래 JavaScript 기능은 작동하는 동안 Internet Explorer에서 호환성 문제에 직면합니다. 하드코딩된 도시 옵션 배열을 사용하여 선택한 국가를 기반으로 도시 드롭다운을 동적으로 채웁니다.

JQuery 구현:

호환성을 강화하고 구현을 단순화하기 위해 JQuery는 채용될 수 있습니다. JQuery를 사용하는 효율적인 접근 방식은 다음과 같습니다.

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 ''   lcn   ''
    }).join('');
    $locations.html(html)
  });
});

설명:

• 국가를 해당 도시의 배열에 매핑하는 객체 위치를 정의합니다.
• 변경 이벤트 핸들러 국가 드롭다운의 경우 도시 드롭다운의 동적 인구가 트리거됩니다.
• 이벤트 핸들러는 선택한 국가를 가져오고 위치에서 해당 도시 배열을 검색합니다. object.
• 루프는 도시에 대한 HTML 옵션 요소를 생성하고 $locations.html(html)을 사용하여 도시 드롭다운에 추가합니다.

Demo:

작업 데모를 위해 제공된 Fiddle 링크를 참조할 수 있습니다.

이 JQuery 구현은 간결하고 브라우저 간 호환되며 계단식 드롭다운의 동적 채우기를 촉진합니다.