ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery JSON_jquery に基づく地方自治体の第 2 レベルおよび第 3 レベルの連携効果

jQuery JSON_jquery に基づく地方自治体の第 2 レベルおよび第 3 レベルの連携効果

WBOY
リリース: 2016-05-16 15:56:34
オリジナル
1020 人が閲覧しました

都道府県と都市のリンク ドロップダウン効果は、WEB、特に一部の会員情報システムや電子商取引 Web サイトで広く使用されています。開発者は通常、Ajax を使用して、更新不要のドロップダウン リンクを実装します。この記事では、jQuery プラグインを使用して、JSON データを読み取って更新することなく、州と都市の動的なドロップダウンの第 2 (第 3) レベルの連携効果を実現する方法について説明します。

HTML

まず、jquery ライブラリと cityselect プラグインをヘッドにロードします。

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cityselect.js"></script> 
ログイン後にコピー

次に、#city に 3 つの選択を配置し、その 3 つの選択のクラス属性を prov、city、dist に設定します。これらはそれぞれ、province、city、district (郡) の 3 つのドロップダウン ボックスを表します。 。州と都市の第 2 レベルの連携のみを実現したい場合は、第 3 の距離選択を削除するだけであることに注意してください。

 
<div id="city"> 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div> 
ログイン後にコピー

jQuery

cityselect プラグインの呼び出しは非常に簡単で、直接呼び出すだけです。

 
$("#city").citySelect(); 
ログイン後にコピー

カスタムパラメータ呼び出し、デフォルトの都道府県と都市を設定します。

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"长沙", //城市 
  dist:"岳麓区", //区县 
  nodata:"none" //当子集无数据时,隐藏select 
}); 
ログイン後にコピー

もちろん、ドロップダウン リスト オプションのデータを拡張およびカスタマイズすることもできます。データ形式は JSON 形式である必要があることに注意してください。

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
}); 
ログイン後にコピー

PHP などのバックエンド言語を使用してデータベース内のデータを JSON 形式に変換し、url パラメーターを使用してバックエンド アドレスをポイントし、更新不要のリンク効果を実現することもできます。

 
$("#city").citySelect({ 
  url:"data.php" 
}); 
ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート