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

都道府県と都市のリンク ドロップダウン効果は、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" 
}); 

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