มาดูเอฟเฟกต์กันเถอะ:
ผล
-คลิกที่จะปรากฏกล่อง
-คลิกช่องทำเครื่องหมายและตัวเลือกที่เลือกจะแสดงใน Div ที่เลือก
- คลิกอีกครั้งเพื่อยกเลิกการเลือกสถานะตัวเลือกที่เลือกที่แสดงใน DIV ที่เลือกจะยกเลิกการแสดงผล
-คลิกไอคอนตัวเลือก X ใน DIV ที่เลือกเพื่อยกเลิกการแสดงผลของตัวเลือกและยกเลิกช่องทำเครื่องหมายที่เกี่ยวข้องเพื่อเลือกสถานะ
-คลิกในหมวดหมู่หลักหมวดหมู่ย่อยไม่ได้เลือกคลิกที่หมวดหมู่ย่อยเลือกหมวดหมู่หลักเพื่อยกเลิกการเลือกสถานะ
- สามารถเลือกได้มากถึง 3 ตัวเลือก
-คลิกไอคอน X เพื่อปิดกล่องป๊อปอัพ
-คลิกปุ่มตกลงเพื่อแสดงผลลัพธ์ที่เลือก
บล็อกรหัส
รหัสตัวอย่าง HTML
<div> <label> หมวดหมู่แผนก: < /label> <div> <อินพุต type = "hidden" name = "cg_str" id = "cg_str" @if (อินพุต :: มี ('cg_str')) value = "{{อินพุต :: get (cg_str ')}}" @endif /> @if (อินพุต :: มี ('type')) value = "{{อินพุต :: get ('type')}}" @endif/> </div> </div> <! href = "JavaScript: void (0);"> ยาทางคลินิก </a> </li> <li> <a href = "JavaScript: void (0);"> แผนกเสริม </a> </li> <li> <a href = "JavaScript: void (0); onclick = "$ ('#closepopwindow'). fadeout ()"> </a> </li> </ul> <div> </div> </div> <div> <!-ยาคลินิก-> <div> <! @Foreach ($ olcyx1 เป็น $ key => $ val) <div> <อินพุต type = "ช่องทำเครื่องหมาย" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <lable> {{$ val-> name}} <!-การผ่าตัด--> <div> <อินพุต type = "ช่องทำเครื่องหมาย" value = "5" parent = "1"/> <label> การผ่าตัด </label> <div> </div> </div> @Foreach ($ olcyx2 เป็น $ key => $ val) <div> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> <!-Surgery-e-> <!-อื่น ๆ-> <div> <อินพุตประเภท = "copbox" value = "6" parent = "1"/> <lable> <div> <อินพุต Type = "Cuptbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> ชื่อ}} </label> <div> แผนกเสริม-> <div> <div> <div> </div> </div> @foreach ($ outzks เป็น $ key => $ val) <div> <อินพุตประเภท = "ช่องทำเครื่องหมาย" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}" </div> @endforeach <div> </div> </div> <!-แผนกเสริม-e-> <!-บริษัท ยา--> <div> <div> <div> <div> </div> </div> @FoReach ($ oyygs เป็น $ key => $ val) parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach </div> </div> <! <div> <div> </div> </div> <div> </div> </div> <div> <อินพุต type = "ปุ่ม" value = "ตกลง" onclick = "checkreturn ();"/> </div> </div> <! -รหัสตัวอย่าง JS
<script> // กำหนดตัวแปรส่วนกลางเริ่มต้น var num = 1; // หมวดหมู่ของแผนกหมายเลขตัวเลือก var cg_str = '' // แผนกหมวดหมู่ id id id ประเภท var type = '' // หมวดหมู่ชื่อแผนกสตริง // refresh และเก็บค่า $ () {var str = $ ("#cg_str") = $ ("#type"). val ()+'+';} str = str.split ("/"); $ (นี้) .attr ("ตรวจสอบ", true); HREF = "JavaScript: Void (0);" // เปิดฟังก์ชั่นกล่องตัวเลือกหมวดหมู่แผนก iDnumber (คำนำหน้า) {var idnum = คำนำหน้า; return idnum;} function show_hidden (controlmenu, num, คำนำหน้า) {controlmenu.eq (num) .siblings (). ค้นหา ('a'). RemoveClass ("sele"); controlmenu.eq (num) .find ('a'). addclass ("sele"); VAR Content = คำนำหน้า + num; $ ('#'+เนื้อหา). show (); $ ('#'+เนื้อหา) .siblings (). ซ่อน ();} ฟังก์ชั่น getWindowPop () {$ ("ul#tagchange li") ค้นหา ("a"). RemoveClass ("sele"); $ ("ul#tagchange li: ลูกคนแรก"). addclass ("sele"); $ ("div.pop_sele_cont_box") ค้นหา ("div.pop_sele: ลูกคนแรก") แสดง (); $ ("div.pop_sele_cont_box") ค้นหา ("div.pop_sele: ไม่ (: เด็กคนแรก)"). ซ่อน (); $ ("div.pop_sele_cont_box div.pop_sele"). attr ("id", function () {return idnumber ("no")+ $ ("div.pop_sele_cont_box div.pop_sele"). ดัชนี (นี่);}); $ ('#closepopwindow'). show ();} $ ("ul#tagchange li: ไม่ใช่ (: last-child)") คลิก (ฟังก์ชั่น () {var c = $ ("ul#tagchange li"); ดัชนี var = C.Index (นี่); if (ดัชนี <3) {var p = idnumber $ ("div.pop_sele") ค้นหา ("div") ค้นหา ("อินพุต [type = 'ช่องทำเครื่องหมาย']") คลิก (ฟังก์ชัน () {var val = $ (นี่) .val (); var labelval = $ (นี่) .next ('label'). html () if ($ (นี่). is (": ตรวจสอบ")) {// เลือกกระบวนการ // ตัวเลือกขนาดกระบวนการกระบวนการ $ ("div.pop_sele") ค้นหา ("div") ค้นหา ("อินพุต [type = 'ช่องทำเครื่องหมาย']: ตรวจสอบ") แต่ละฟังก์ชัน () $ (นี้) .attr ("ตรวจสอบ", เท็จ); Lab) {var index = $ ("div.department_block") ค้นหา ("div.left") ดัชนี (นี่); "); + = labelval + ' +'; $ ("div.right_block") ต่อท้าย (html); $ ("div.department_block") ค้นหา ("div.left") ดัชนี (นี่); }});}}; var labelval = $ (obj) .parent (). parent (). ค้นหา ("div.left"). html (). trim (); $ ("div.department_block"). eq (ดัชนี). remove (); // ลบตัวเลือกที่เลือกนี้ // กล่องกาเครื่องหมายถูกตั้งค่าเป็น unchected $ ("div.pop_sele") ค้นหา ("div") ค้นหา ("อินพุต [type = 'ช่องทำเครื่องหมาย']: ตรวจสอบ") แต่ละ (ฟังก์ชั่น () {ถ้า ($ (นี้) .val () == val) {$ (นี้) // แก้ไขค่าหมวดหมู่ของแผนก cg_str = cg_str.replace (val + '/', ""); type = type.replace (labelval + ' +', ""); num-;} // ปิดฟังก์ชันตัวเลือกหมวดหมู่แผนก checkreturn () {// ใส่ค่าลงในกล่องข้อความ var cg_ids = cg_str.substring (0, cg_str.length-1); var type_str = type.substring (0, type.length-1); $ ("#cg_str"). val (cg_ids); $ ("#type"). val (type_str); $ ('#closepopwindow'). fadeout ();} </script>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น