jQuery를 사용하여 선택한 국가를 기반으로 하는 도시로 계단식 드롭다운을 채우는 방법은 무엇입니까?

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

문제:

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

원본 JavaScript 코드:

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

JQuery 구현:

호환성을 강화하고 구현을 단순화하기 위해 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 옵션 요소를 생성하고 $locations.html(html)을 사용하여 도시 드롭다운에 추가합니다.

데모:

다음을 수행할 수 있습니다. 작업 데모를 보려면 제공된 Fiddle 링크를 참조하세요.

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

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