ブラウザーの互換性を向上させるために jQuery を使用してカスケード ドロップダウンを設定する方法

Susan Sarandon
リリース: 2024-10-28 02:33:02
オリジナル
431 人が閲覧しました

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

jQuery を使用したカスケード ドロップダウンの設定

背景

HTML とJavaScript。最初の JavaScript コードは機能しましたが、Internet Explorer では互換性の問題が発生しました。したがって、互換性を強化するために jQuery に移行しようとしています。

解決策

問題の解決策は驚くほど簡単です。

<br> jQuery(function($) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!