حدد مشكلة صغيرة تمت مواجهتها باستخدام Bootstrap SelectPicker ، واستخدمها في المرة القادمة التي تقوم فيها بالتحقق من الخطأ
$ ('. selectpicker'). selectpicker ('val' ، 'musstard') ؛ // single-select $ ('. selectpicker'). selectpicker ('val' ، ['musstard' ، 'relish']) ؛ يمكن تحديث الشاشةحدد السؤال: يجب أن تكون Set Val هي قيمة القيمة في الخيار ، وإذا تم استخدام الاسم ، فلماذا لا يسري حيز التنفيذ؟
ملاحظة: تحديد تجميل (bootstrap)
الملفات التي تحتاج إلى تقديم:
bootstrap-combled.min.css
bootstrap- select.css
bootstrap-select.js
بالإضافة إلى العديد من ملفات bootstarp شائعة الاستخدام مثل bootstrap.min.js
ينجز:
1. أضف فئة أو معرف في علامة <select>. يوصى بإضافة فئة لأنه يمكن تكرار الفصل ؛
2. إضافة طريقة التهيئة إلى ملف JS:
initfnc: function () {$ (". selectpicker"). selectPicker ({noneselectedText: 'الرجاء تحديد'}) ؛}استدعاء هذه الطريقة أثناء التهيئة الخارجية على ما يرام!
الصورة أدناه مملوءة: إنها ليست جيدة جدًا ، لكنني أعتقد أنها أفضل بكثير من ذي قبل!
ومع ذلك ، هناك العديد من المشكلات في هذا البرنامج المساعد التجميلي:
في الواقع ، لا يوجد الكثير ، لكنني أعتقد أن هذه المشكلة صعبة للغاية. بعد استخدام هذه الطريقة لتجميلها ، سيتم عرض <select> المخصصة ديناميكيًا. أعتقد أنه يجب أن يكون هكذا: يعرض bootstrap-select.js <select> بدون خيار "الرجاء إدخال" ، بحيث لا يمكن كتابة الخيار المعين ديناميكيًا! إذا كان يمكن إصلاح "NoneselectedText:" الرجاء تحديد "، فيجب حل هذه المشكلة!
بعد عدة ساعات من البحث ، تم العثور على المشكلة ، ولكن تم حل واحد منهم فقط ؛
عند الاتصال في JS ، يجب أن تنتظر حتى يتم تحميل الخيار الموجود على السطح قبل الاتصال
initfnc: function () {$ (". selectpicker"). selectPicker ({noneselectedText: 'الرجاء تحديد'}) ؛}وبهذه الطريقة ، يمكن أن تُعد مهمة تحديد الديناميكي أيضًا ، ولكن لا تزال هناك مشكلة: لا يمكن تحميل كل تحديد في الصفحة كل ذلك عند تهيئة الصفحة. على سبيل المثال ، يوجد الآن خياران تحديد مرتبطان ، أي خيار الاختيار الثاني يحتاج إلى التغيير وفقًا للآخر ، وإضافة مراقبة onchange أو التغيير في JS ؛ إذا كان تجميل بهذه الطريقة ، فستكون هناك مشاكل!
ما سبق هو المعرفة ذات الصلة حول Bootstrap SelectPicker الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!