Echemos un vistazo al efecto:
Efecto
-Al clic para aparecer en la caja
-Al casilla de verificación Haga clic en la casilla de verificación y las opciones seleccionadas se muestran en el div.
- Haga clic nuevamente para desmarcar el estado, la opción seleccionada que se muestra en el DIV seleccionado cancelará la pantalla
-Al icono de opción X en el DIV seleccionado para cancelar la visualización de la opción y cancelar la casilla de verificación correspondiente para seleccionar el estado
-La clic en la categoría principal, la subcategoría no está seleccionada, haga clic en la subcategoría, seleccione la categoría principal para deseleccionar el estado
- Se pueden seleccionar hasta 3 opciones
-Al icono X para cerrar el cuadro emergente
-Al botón Aceptar para mostrar los resultados seleccionados
Bloque de código
código de fragmento HTML
<div> <label> categoría de departamento: </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" type "type" type "type" one "one" one "one" one "one" one "one" one "one" one "one" onclewowowOwwOW @if (input :: has ('type')) value = "{{input :: get ('type')}}" @endif/> </div> </div> <!-de departamento type start-> <div id = "streepwindow" style = "visual href = "javascript: void (0);"> medicina clínica </a> </li> <li> <a href = "javascript: void (0);"> departamento auxiliar </a> </li> <li> <a href = "javascript: void (0);"> otros </a> </li> <li> <a onClick = "$ ('#ClosePopwindow'). FadeOut ()"> </a> </li> </ul> <viv> </div> </div> <div> <!-clínico medicina-s-> <div> <!-medicina interna-> <div> <put type = "checkbox" value = "4" parent = "1"/> <label> @ForEach ($ olcyx1 como $ key => $ val) <div> <input type = "checkbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}}}} </selebil> <viv> </iv> </div> @endeach <iv> <viv> <siv> Diver- < <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> <!-cirugía-e-> <!-otros-> <div> <input type = "checkbox" value = "6" parent = "1"/> <etiqueta> otro </label> <div> </iv> </div> @foreach ($ olcyx3 As $ <input type = "checkbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </selebel> <viv> </div> </div> @endforach <div> </shive <!-Otro-e-> <pond> <! Departamento-s-> <div> <div> <div> </div> </div> @foreach ($ ofzks as $ key => $ val) <div> <input type = "checkbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> { val-> name}}}}}}}}}}} </etiquet @endforeach <div> </div> </div> <!-auxiliar de departamento-e-> <!-Pharmaceutical Company-s-> <div> <div> <div> <div> </div> </div> @foreach ($ oyygs as $ key => $ val) <div> <input type = "checkbox" valor = "{{$ val-> it}" "" "" "" " 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> Selected: </div> <div> <div></div> </div> <div></div> </div> <div> <input type="button" value="OK" onClick="checkReturn();"/> </div> </div><!-- Location that appears after the message is selected -E --><!-- Information prompt--> <div id="msg">Maximum 3 options</div> </div></div><!-- Department type end -->Código JS Snippet
<script> // Defina la variable global inicial var num = 1; // Categoría de departamento Número opcional var cg_str = '' '; // Departamento de categoría ID de identificación Var type =' '; // Categoría de departamento Nombre de nombre String // Actualizar y mantener seleccionado $ (function () {var str = $ ("#cg_str"). Val (); If (str.lengthing <1) {return false;} else {cg_ str ='/''; $ ("#type"). val ()+'+';} str = str.split ("/"); $ (this) .Attr ("verificado", verdadero); href = "javascript: void (0);" // Abrir la función de opción de categoría de departamento Función IdNumber (prefix) {var idnum = prefix; return idnum;} función show_hidden (controlmenu, num, prefijo) {controlmenu.eq (num) .siblings (). find ('a'). removeClass ("sele"); controlmenu.eq (num) .find ('a'). addClass ("sele"); contenido var = prefijo + num; $ ('#'+contenido) .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: first-child"). show (); $ ("div.pop_sele_cont_box"). find ("div.pop_sele: no (: 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: no (: 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);}}); $ ("div.pop_sele"). find ("div"). find ("input [type = 'checkbox']"). click (function () {var val = $ (this) .val (); var LabelVal = $ (this) .Next ('Label'). Html (). Trim (); var Parent = $ (this) .attr ("parent");;; if ($ (this) .is (": checked")) {// seleccione Proceso // opción de clase de tamaño de proceso $ ("div.pop_sele"). find ("div"). find ("input [type = 'checkbox']:: checked"). Cada (function () {if ($ (this) .val () == parent || $ (this) .attr ("parent") ==) $ (this) .Attr ("checked", falso); índice = $ ("div.department_block"). find ("div.left"). índice (this); num--; ' +'; $ ("Div.Right_Block). Append (html); $ ("Div.department_block"). Find ("Div.left"). Index (this); num--; var LabelVal = $ (obj) .Parent (). Parent (). Find ("Div.left"). Html (). Trim (); $ ("div.department_block"). eq (index) .remove (); // Eliminar esta opción seleccionada // la casilla de verificación está configurada en $ ("div.pop_sele"). Find ("div"). Find ("input [type = 'checkbox']: checked"). Cada (function () {if ($ (this) .val () == val) {$ (this) .ATtr ("checked", falso);}); // modificar el valor de la categoría de departamento cg_str = cg_str.replace (val + '/', ""); type = type.replace (LabelVal + ' +', ""); num-;} // Cerrar la función de opción Categoría de departamento Función checkReturn () {// Ponga el valor en el cuadro de texto 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>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.