>  기사  >  웹 프론트엔드  >  향상된 브라우저 호환성을 위해 jQuery로 계단식 드롭다운을 채우는 방법은 무엇입니까?

향상된 브라우저 호환성을 위해 jQuery로 계단식 드롭다운을 채우는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-28 02:33:02429검색

How to Populate Cascading Dropdowns with jQuery for Improved Browser Compatibility?

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

배경

HTML과 HTML을 모두 사용하여 동적 계단식 드롭다운이 있는 양식을 만들려고 할 때 문제에 직면했습니다. 자바스크립트. 초기 JavaScript 코드는 작동했지만 Internet Explorer에서 호환성 문제가 발생했습니다. 결과적으로, 귀하는 향상된 호환성을 위해 jQuery로 전환하려고 합니다.

해결책

문제에 대한 해결책은 놀라울 정도로 간단합니다.

<br> jQuery(function($) {</p>
<pre class="brush:php;toolbar:false">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)
});

});

데모

[에서 이 솔루션의 라이브 데모를 확인하세요. 바이올린](여기에 바이올린 링크가 있습니다).

위 내용은 향상된 브라우저 호환성을 위해 jQuery로 계단식 드롭다운을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.