Schauen wir uns den Effekt an:
Wirkung
-Klicken Sie, um die Box zu eröffnen
-Klicken Sie auf das Kontrollkästchen, und die ausgewählten Optionen werden im ausgewählten Div angezeigt.
- Klicken Sie erneut, um den Status zu deaktivieren. Die ausgewählte Option, die im ausgewählten Div angezeigt wird, storniert die Anzeige
-Klicken Sie auf das Symbol Option X in der ausgewählten Div
-Klicken Sie auf die Hauptkategorie, die Unterkategorie nicht ausgewählt, klicken Sie auf die Unterkategorie, wählen Sie die Hauptkategorie aus, um den Zustand abzuwählen
- Bis zu 3 Optionen können ausgewählt werden
-Klicken Sie auf das X-Symbol, um die Popup-Box zu schließen
-Klicken Sie auf die Schaltfläche OK, um die ausgewählten Ergebnisse anzuzeigen
Codeblock
HTML -Snippet -Code
<div> <label>Department Category: </label> <div> <input type="hidden" name="cg_str" id="cg_str" @if(Input::has('cg_str')) value="{{Input::get('cg_str')}}" @endif /> <input type="text" name="type" id="type" onClick="getWindowPop()" @if (input :: Has ('type')) value = "{{input :: get ('type')}}" @endif/> </div> </div> <!-Abteilungsart Start-> <divpopwindow "style =" display: keine; " href = "JavaScript: void (0);"> Klinische Medizin </a> </li> <li> <a href = "JavaScript: void (0); Onclick = "$ ('#ClosepopWindow'). @foreach($oLcyx1 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- Internal Medicine-E --> <!-- 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> <div></div> </div> @endforeach <div></div> <!-- Surgery-E --> <!-- Others --> <div> <input type="checkbox" value="6" parent="1"/> <label>Other</label> <div></div> </div> @foreach($oLcyx3 as $key=>$val) <div> <input type = "checkbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> </div> </div> </div> </divical-auxiGer </div> </div> <! Abteilung-S-> <div> <div> <div> </div> </div> @foreach ($ OfZks as key => $ val) <div> <Eingabe type = "CheckBox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}}}}}}} </{{$ val-> name @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> <! <div> <div> </div> </div> <div> </div> </div> <div> <Eingabe type = "button" value = "OK" onclick = "checkReturn ();"/> </div> </div> <!-Ort, der nach der Auswahl der Nachricht ausgewählt wurde--DIVISICT-DIVISICT-> </Div ID = "msg"> msg "msg"> Maximal 3-Optionen 3-Optionen </Dives </div </div </div </div </divi> </divi> </divi> </divi> </divi-> </msg id = "msg".JS Snippet Code
<Script> // Definieren Sie die anfängliche globale Variable var Num = 1; // Abteilungskategorie Optionale Zahl var cg_str = ''; // Abteilungskategorie ID String var type = ''; // Abteilungskategorie Name String // Aktualisieren und behalten Sie ausgewählt $ (function () {var str = $ ("#cg_str"). Val (). = $ ("#type"). Val ()+'+'; $ (this) .Attr ("geprüft", true); href = "javaScript: void (0);" // Öffnen Sie die Option für die Option des Abteilungskategoriens IDNumber (Präfix) {var idnum = Präfix; return idnum;} function show_hidden (controlMenu, num, prefix) {controlMenu.eq (num) .Siblings (). find ('a'). removeclass ("sele"); controlMenu.eq (num) .find ('a'). addClass ("sele"); var content = Präfix + num; $ ('#'+content) .show (); $ ('#'+content) .sillings (). hide ();} Funktion getWindowpop () {$ ("ul#TagChange li"). Find ("a"). removeclass ("sele"); $ ("ul#tagchange li: First-Kind a"). AddClass ("sele"); $ ("div.pop_sele_cont_box"). find ("div.pop_sele: First-Child"). show (); $ ("div.pop_sele_cont_box"). find ("div.pop_sele: nicht (: Erstkind)"). 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);}); $ ('#condepopWindow'). show ();} $ ("ul#tagchange li: nicht (: letztes Kind)"). click (function () {var c = $ ("ul#tagchange li"); var index = c.index (this); if (Index <3) {var p = idnumber ("no"); $ ("div.pop_sele"). find ("div"). find ("input [type = 'checkBox']"). click (function () {var val = $ (this) .val (); var labelVal = $ (this) .Next ('label'). if ($ (this) .is (": checked")) {// Process // Prozess der Prozessgrößenklasse Option $ ("div.pop_sele"). Find ("Div"). Find ("Eingabe [type = 'Checkbox']: checked"). Jede (Funktion () () {if ($ ($) .val () == Eltern | $ (thisattr (". $ (this) .Attr ("geprüft", false); Index = $ ("Div.Department_block"). Find ("Div.Left"). Index (this); num--;}}); LabelVal + ' +'; $ ("div.right_block"). Anhang (html); $ ("Div.Department_block"). Find ("Div.Left"). Index (this); ""); var labelVal = $ (obj) .Parent (). parent (). find ("div.left"). html (). trim (); $ ("Div.Department_Block"). EQ (Index) .Remove (); // Entfernen Sie diese ausgewählte Option // Kontrollkästchen wird auf nicht kontrolliert $ ("div.pop_sele") gesetzt. Find ("Div"). Find ("input [type = 'pokBox']: checked"). Jede (Funktion () {if ($ ($ (this) .val () == val) {$ (this) .attr ("geprüft",};}}}); // Ändern Sie den Wert der Abteilungskategorie cg_str = cg_str.replace (Val + '/', ""); type = type.replace (LabelVal + ' +', ""); Num-;} // Schließen Sie die Optionskästchen der Abteilungskategorie für Optionskästchen CheckReturn () {// Legen Sie den Wert in das Textfeld 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); $ ('#ConepopWindow'). Fadeout ();} </script>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.