Mari kita lihat efeknya:
Memengaruhi
-Klik untuk memunculkan kotak
-Klik kotak centang, dan opsi yang dipilih ditampilkan di div yang dipilih.
- Klik lagi untuk hapus centang status, opsi yang dipilih yang ditampilkan di DIV yang dipilih akan membatalkan tampilan
-Klik Ikon Opsi X di Div yang Dipilih untuk membatalkan tampilan opsi, dan membatalkan kotak centang yang sesuai untuk memilih status
-Klik pada kategori utama, subkategori tidak dipilih, klik pada subkategori, pilih kategori utama untuk membatalkan pilihan negara bagian
- Hingga 3 opsi dapat dipilih
-Klik ikon X untuk menutup kotak pop-up
-Klik tombol OK untuk menampilkan hasil yang dipilih
Blok kode
Kode snippet HTML
<div> <label> Kategori departemen: </label> <viv> <input type = "hidden" name = "cg_str" id = "cg_str" @if (input :: have ('cg_str')) value = "{{input :: get ('cg_str')}}" @endif /<input :: get ('cg_str')}} @endif /<input = " onClick="getWindowPop()" @if(Input::has('type')) value="{{Input::get('type')}}" @endif/> </div></div> <!-- Department type start --><div id="closePopWindow" style="display: none;"> <div></div> <div> <ul id="tagChange"> <li><a href="javascript:void(0);">Clinical Medicine</a></li> <li><a href="javascript:void(0);">Auxiliary Department</a></li> <li><a href="javascript:void(0);">Other</a></li> <li><a OnClick = "$ ('#closepopWindow'). fadeout ()"> </a> </li> </ul> <Div> </div> </div> <v>!-obat klinis-s-> <v> <!-div> div> <Div> <input type = "centang" nilai "value =" 4 "parent =" 1 " @foreach ($ olcyx1 as $ key => $ val) <viv> <input type = "centang kotak" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> </Div! --> <!-- Surgery-S --> <div> <input type="checkbox" value="5" parent="1"/> <label>Surgery</label> <div></div> </div> @foreach($oLcyx2 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" Parent = "{{$ val-> Parent_ID}}"/> <label> {{$ val-> name}} </label> <v div> </div> </div> @endforeach <viv> </div> <!-Diver> 6 "6" </div> @foreach ($ olcyx3 as $ key => $ val) <vi> <input type = "centang kotak" value = "{{$ val-> id}}" parent = "{$ val-> parent_id}}"/> <label> {$ val- name {$}} </label> </div> <label> {{$ val- nama}}} </label> </div> <label> {{$ val- name}}} </label> </div> <label> {{$ val- name}}} </label> </div> Other-e-> </div> <!-Clinical Medicine-e-> <!-Auxiliary Department-S-> <div> <div> <div> </div> </div> @foreach ($ ofzks sebagai $ key => $ val) <viT> "Parent =" Vale "{{{$ val-> ID}} {{{$ val-> {{{$ val-> {{{$ val-> {$ {{{$ val-> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> </div> <!-- Auxiliary Department-E --> <!-- Pharmaceutical Company-S --> <div> <div> <div> <div></div> </div> @foreach($oYygs as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> </div> <!-- Pharmaceutical Company-E --> </div><!-- Location that appears after the message is selected -S-> <div> <div> <div> <div> dipilih: </div> <div> <div> </div> </div> <viv> </div> </div> <v> <input type = "Tombol" value = "OK" OnClick = "CheckReturn ();"/> </Div> </Div> <!-Lokasi yang tampak setelah pesan yang ditunjukkan-adalah pesan-); "/> </Div> </Div> <! id = "msg"> maksimum 3 opsi </div> </div> </div> <!-Jenis departemen end->Kode Snippet JS
<script> // Tentukan variabel global awal var num = 1; // Departemen Kategori Nomor opsional var cg_str = ''; // Departemen Kategori ID ID Var Type = ''; // Name Kategori Departemen String // Refresh dan Tetap Pilih $ (function () {var str = $ ("#cg_str"). Val (); if (str.lengthy () {var str = $ ("#cg_str"). = $ ("#type"). Val ()+'+'; $ (ini) .attr ("checked", true); href = JavaScript: batal (0); " // buka kotak opsi kategori departemen fungsi IDNumber (awalan) {var idnum = prefix; return IDNUM;} function show_hidden (controlMenu, num, awalan) {controlMenu.eq (num) .siblings (). find ('a'). removeClass ("sele"); controlMenu.eq (num) .find ('a'). addClass ("sele"); var content = awalan + num; $ ('#'+konten) .show (); $ ('#'+Content) .SIBLINGS (). Hide ();} function getWindowPop () {$ ("UL#tagchange li"). find ("a"). RemoveClass ("sele"); $ ("UL#TagChange Li: First-Child A"). AddClass ("Sele"); $ ("Div.pop_sele_cont_box"). Find ("div.pop_sele: anak pertama"). show (); $ ("Div.pop_sele_cont_box"). Find ("div.pop_sele: not (: first-child)"). hide (); $ ("Div.pop_sele_cont_box div.pop_sele"). attr ("id", function () {return idnumber ("no")+ $ ("div.pop_sele_cont_box div.pop_sele"). index (this);}); $('#closePopWindow').show();}$("ul#tagChange li:not(:last-child)").click(function(){ var c = $("ul#tagChange li"); var index = c.index(this); if(index<3){ var p = idNumber("No"); show_hidden(c,index,p); }});//Select department category $ ("Div.pop_sele"). Find ("Div"). Find ("Input [type = 'Checkbox']"). Klik (function () {var val = $ (this) .val (); var labelVal = $ (this) .next ('label'). html (). trim (); var paritor = $ (ini) .attroptr if ($ (this) .is (": checked")) {// pilih proses // opsi kelas ukuran proses $ ("div.pop_sele"). find ("div"). find ("input [type = 'checkbox']: checked"). masing -masing (fungsi () {ife ($ (") .val (). Val (). $ (ini) .attr ("checked", false); var v = $ (ini) .val (); index = $ ("Div.department_block"). Temukan ("Div.Left"). Indeks (ini); num--}}); LabelVal + ' +'; $ (div.right_block "). Append (html); $ ("Div.Department_block"). Find ("Div.Left"). Indeks (ini); "); var labelVal = $ (obj) .parent (). Parent (). Find ("Div.Left"). html (). trim (); $ ("Div.department_block"). EQ (index) .remove (); // Hapus opsi yang dipilih ini // kotak centang diatur ke tidak dicentang $ ("Div.pop_sele"). Temukan ("Div"). Find ("Input [type = 'Checkbox']: checked"). Masing -masing (fungsi () {if ($ (ini) .val () == val) {$ (ini) .attr ("centang", salah); // Ubah Nilai Kategori Departemen CG_STR = CG_STR.Replace (val + '/', ""); type = type.replace (labelVal + ' +', ""); num-;} // Tutup kotak opsi Kategori Departemen Kotak checkRetReTurn () {// Masukkan nilai ke dalam kotak teks 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>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.