ทำเครื่องหมายปัญหาเล็ก ๆ ที่พบโดยใช้ bootstrap selectpicker และใช้เป็นครั้งต่อไปที่คุณตรวจสอบข้อผิดพลาด
$ ('. selectpicker'). selectpicker ('val', 'musstard'); // single-select $ ('. selectpicker') selectpicker ('val', ['Musstard', 'ชอบ']); สามารถรีเฟรชการแสดงผลทำเครื่องหมายคำถาม: Set Val ต้องเป็นค่าค่าในตัวเลือกและหากใช้ชื่อทำไมจึงไม่มีผล?
PS: เลือกความงาม (bootstrap)
ไฟล์ที่จำเป็นต้องแนะนำ:
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
เช่นเดียวกับไฟล์ bootstarp ที่ใช้กันทั่วไปหลายไฟล์เช่น bootstrap.min.js
ทำให้สำเร็จ:
1. เพิ่มคลาสหรือ ID ในแท็ก <elect> ขอแนะนำให้เพิ่มคลาสเนื่องจากชั้นเรียนสามารถทำซ้ำได้
2. เพิ่มวิธีการเริ่มต้นในไฟล์ JS:
initfnc: function () {$ (". selectpicker") selectpicker ({noneselectedText: 'โปรดเลือก'});}การเรียกใช้วิธีนี้ในระหว่างการเริ่มต้นภายนอกก็โอเค!
ภาพด้านล่างสวยงาม: มันไม่ดีมาก แต่ฉันคิดว่ามันดีกว่าเดิมมาก!
อย่างไรก็ตามมีปัญหาหลายอย่างเกี่ยวกับปลั๊กอินความงามนี้:
ที่จริงแล้วมีไม่มาก แต่ฉันคิดว่าปัญหานี้ยุ่งยากมาก หลังจากใช้วิธีนี้เพื่อทำให้สวยงามแล้ว <Select> ที่ได้รับมอบหมายแบบไดนามิกจะปรากฏขึ้น ฉันคิดว่ามันควรจะเป็นเช่นนี้: bootstrap-select.js แสดง <elect> โดยไม่มีตัวเลือก 'โปรดป้อน' เพื่อไม่ให้ตัวเลือกที่กำหนดแบบไดนามิกไม่สามารถเขียนได้! หาก NoneselectedText: 'โปรดเลือก' สามารถแก้ไขได้ปัญหานี้ควรแก้ไขได้!
หลังจากการวิจัยหลายชั่วโมงพบปัญหา แต่มีเพียงหนึ่งในนั้นเท่านั้นที่ได้รับการแก้ไข
เมื่อโทรใน JS คุณต้องรอจนกว่าตัวเลือกที่เลือกไว้บนพื้นผิวจะโหลดก่อนโทร
initfnc: function () {$ (". selectpicker") selectpicker ({noneselectedText: 'โปรดเลือก'});}ด้วยวิธีนี้การกำหนดแบบไดนามิกสามารถทำให้สวยงามได้ แต่ยังมีปัญหา: ไม่ใช่ทุกการเลือกในหน้าเว็บที่สามารถโหลดได้ทั้งหมดเมื่อเริ่มต้นหน้า ตัวอย่างเช่นขณะนี้มีตัวเลือกการเลือกที่เชื่อมโยงสองตัวคือตัวเลือกของการเลือกที่สองจำเป็นต้องเปลี่ยนตามตัวเลือกแรกและเพิ่มการตรวจสอบ OnChange หรือการเปลี่ยนแปลงใน JS; หากสวยงามด้วยวิธีนี้จะมีปัญหา!
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับ Bootstrap SelectPicker แนะนำให้คุณรู้จักโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!