都道府県と都市のリンク ドロップダウン効果は、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" });
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。