استغرقت قائمة صغيرة من المقاطعات والبلدية الكثير من الوقت لاستكشافها. والسبب هو أنها ليست ماهرة في jQuery. نظرًا لأنه عمل بجد لإكمال مكون ، فإنه يريد بطبيعة الحال مشاركته لأولئك الذين يحتاجون إلى استخدامه.
هذا مجرد إصدار أساسي ، ويجب تحسينه لاحقًا.
الرمز: عنوان القائمة ذات الصلة بالمقاطعات والبلدية
يوضح:
لن أتحدث عن بيان SQL بعد الآن ، فهو يحتوي على ملفين "City.SQL" و "Provincial.sql".
1. دعنا نتحدث عن الحصول على البيانات أولاً
public void itprocitys () {logger.info ("Get the region") ؛ قائمة <Croprincials> المقاطعات = المقاطعات. me.getProvincials () ؛ لـ (المقاطعات الإقليمية: المقاطعات) {List <Citys> Cities = citys.me.getCitySbyprovincialId (probel.getlong ("id")) ؛ Provincial.put ("Citys" ، Jsonkit.tojson (Citys)) ؛ } setattr ("المقاطعات" ، المقاطعات) ؛ عرض ("procity.jsp") ؛}1). احصل على جميع قوائم المقاطعة أولاً.
2). احصل على القائمة البلدية المقابلة وفقًا لمعرف المقاطعة.
3). عند الحصول على قوائم البلدية ، يرجى ملاحظة أن القائمة يتم تحويلها إلى بيانات JSON ، ويتم استخدام Jackjson هنا.
2. تحدث عن تخطيط الصفحة
<حدد name = "province_code" id = "province_select"> <c: foreach heads = "$ {provincials}" var = "item"> <option value = "$ {item.procode} id = "city_select"> </select>1). تم استخدام اثنين من الاختيارات ، ولم تتم إضافة أي أنماط حتى الآن
2). استخدم foreach لتهيئة القائمة الإقليمية أولاً ، وفي الوقت نفسه ، قم بربط بيانات المدينة بسمات CDATA.
3. أخبرني عن تنفيذ JS
$ (function () {processIcialChange () ؛ var $ provincial = $ ("#province_select") ؛ $ provincial.Change (probecialChange) ؛}) ؛ functionsialChange () {var $ provincial = $ ("#province_select") ؛ // قيمة الكود المعروضة على مستوى المقاطعة var provincial_code = $ provincial.val () ؛ var $ selectOption = $ ('#province_select Option [value =' + provincial_code + ']') ؛ var city_data = yunm.jsoneval ($ selectOption.attr ("cdata")) ؛ // قائمة القائمة البلدية $ city_select = $ ("#city_select") ؛ $ city_select.empty () ؛ لـ (var i = 0 ؛ i <city_data.length ؛ i ++) {var code = city_data [i] .Code ؛ var cname = city_data [i] .cname ؛ $ city_select.append ("<option value = '"+code+"'>"+cname+"</potion>") ؛ }}1). عند تحميل تهيئة الصفحة وتبديل القائمة الإقليمية ، يجب تحميل قوائم البلدية
2). احصل أولاً على القائمة الإقليمية ، واحصل على القيمة الحالية ، ثم احصل على الخيار وفقًا للقيمة
3). الحصول على البيانات البلدية من الخيار ، وانتبه إلى استخدام Eval لتحويل البيانات. يمكن أن يكون السبب المحدد هو أن يضيف () بشكل أساسي.
4.) حلقة من خلال القائمة البلدية وعرض الإخراج
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع تعلم برمجة bootstrap.