Jetons un coup d'œil à l'effet:
Effet
-Click pour faire apparaître la boîte
-Cliquez la case à cocher et les options sélectionnées sont affichées dans le div sélectionné.
- Cliquez à nouveau pour décocher l'état, l'option sélectionnée affichée dans le div sélectionné annulera l'affichage
-Cliquez l'icône de l'option x dans le div sélectionné pour annuler l'affichage de l'option et annulez la case à cocher correspondante pour sélectionner l'état
-Click dans la catégorie principale, la sous-catégorie n'est pas sélectionnée, cliquez sur la sous-catégorie, sélectionnez la catégorie principale pour non sécurisé l'état
- jusqu'à 3 options peuvent être sélectionnées
-Cliquez l'icône X pour fermer la boîte contextuelle
-Cliquez le bouton OK pour afficher les résultats sélectionnés
Bloc de code
code d'extrait HTML
<div> <label> Catégorie de département: </ label> <div> <input type = "Hidden" name = "cg_str" id = "cg_str" @if (input :: has ('cg_str')) value = "{{input :: get ('cg_str')}}}" @endif /> <entrée = "text" name = "type" id = "type" sur "getwind (text" nom = "type" = "Type" sur "getwind ()" Name = "Type" = "Type" sur "getwind ()" Nom = "Type" = " @if (input :: has ('type')) value = "{{input :: get ('type')}}" @ endif /> </div> </ div> <! - Type de département Démarrer -> <div id = "roserpopwindow" style = "display: non;"> <div> href = "JavaScript: void (0);"> Médecine clinique </a> </li> <li> <a href = "javascript: void (0);"> département auxiliaire </a> </li> <li> <a href = "javascript: void (0);"> autre </a> </li> <li> <A onclick = "$ ('# rosepopwindow'). fadeout ()"> </a> </li> </ul> <div> </ div> </ div> <div> <! @ForEach ($ olcyx1 as $ key => $ val) <div> <input type = "checkbox" value = "{{$ Val-> id}}" parent = "{{$ Val-> parent_id}}" /> </v> {{$ Val-> name}} </vale <! - Chirurgie-s -> <div> <entrée type = "checkbox" value = "5" parent = "1" /> <belle> chirurgie </vabe> <div> </div> </ div> @foreach ($ olcyx2 as $ key => val) <v> <entrée = "checkbox" value = "{{$ Val-> id}}" Parent = "{{{$ VAL-> Parent_id}" <LABLE> {{$ VAL-> Name}} </ Label> <div> </div> </div> @endForeach <div> </div> <! - Surgery-E -> <! - Autres -> <div> <Input type = "Checkbox" Value = "6" Parent = "1" /> <Que> Autre </ Label> <div> </v> </v> @Forach ($ olcyx3 As $ </v> </v> </v> @For <input type = "checkbox" value = "{{$ Val-> id}}" parent = "{{$ Val-> parent_id}}" /> <label> {{$ Val-> name}} </vabe> <div> </div> </v> <! Département-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}} </ Label> </ Div> <Div> @endFoEach <div> </div> </div> <! - Auxiliary Department-E -> <! - Pharmaceutical Company-S -> <div> <div> <div> <div> </v> </ div> @Forach ($ oyygs as $ key => $ val) <v> <intrut type = "checkbox" value = "{$ Val-> id}}" " Parent = "{{$ Val-> Parent_id}}" /> <bablow> {{$ Val-> name}} </vabe> <div> </ div> </div> @endForeach <v> </div> </div> <! - Pharmaceutical Company-e -> </v> <! <div> <div> </ div> </div> <div> </div> </div> <div> <input type = "Button" value = "ok" onclick = "checkReturn ();" /> </ div> </ div> <! - Emplacement qui apparaît après que le message a été sélectionné -e -> <! - Invite d'information -> <div id = "MSG"> MAXIMUM 3 OPTIONS </ Div> <!Code d'extrait JS
<cript> // Définir la variable globale initiale var num = 1; // Catégorie de département Nombre facultatif var cg_str = ''; // Catégorie de département ID String var type = ''; // Nom de catégorie de département // Rafreser et garder sélectionné $ (function () {var str = $ ("# cg_str"). Val (); if (st .Length <1) {return false;} else {cg_str = str + ' $ ("# type"). Val () + '+';} str = str.split ("/"); $ (this) .attr ("vérifié", true); var val = $ (this) .val (); Href = "JavaScript: void (0);" OnClick = "Suppellectoral (ce // Ouvrez la fonction Option Catégorie du département Fonction IDNumber (préfixe) {var idnum = préfixe; return idnum;} function show_hidden (ControlMenu, num, prefix) {ControlMenu.eq (num) .siblings (). find ('a'). removeclass ("sele"); ControlMenu.eq (num) .find ('a'). addClass ("Sele"); var contenu = préfixe + num; $ ('#' + contenu) .show (); $ ('#' + contenu) .siblings (). hide ();} fonction getWindowpop () {$ ("ul # tagchange li"). find ("a"). removeclass ("sele"); $ ("ul # tagchange li: premier-enfant a"). addClass ("sele"); $ ("div.pop_sele_cont_box"). trouver ("div.pop_sele: premier-enfant"). show (); $ ("div.pop_sele_cont_box"). trouver ("div.pop_sele: non (: premier-enfant)"). hide (); $ ("div.pop_sele_cont_box div.pop_sele"). att ("id", function () {return idNumber ("no") + $ ("div.pop_sele_connt_box div.pop_sele"). index (this);}); $ ('# rosePopwindow'). show ();} $ ("ul # tagchange li: not (: dernier-enfant)"). cliquez (fonction () {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']"). Cliquez sur (fonction () {var val = $ (this) .val (); var labelVal = $ (this) .next ('label'). html (). Trim (); var parent = $ (this) .attr ("parent"); if ($ (this) .is (": checked")) {// sélectionnez l'option de classe de taille de processus //) $ ("div. $ (this) .attr ("vérifié", false); var v = $ (this) .val (); index = $ (div.Department_Block "). Find (" div.left "). });}}); '+'; $ ("div.right_block"). $ ("Div.Department_Block"). Find ("div.left"). }});}}); // Effacer la fonction d'option sélectionnée supprime (obj, val) {var index = $ ("div.department_block"). Find ("div.right"). Find ("a"). Index (obj); var labelval = $ (obj) .parent (). Parent (). find ("div.left"). html (). Trim (); $ ("div.department_block"). eq (index) .Remove (); // Supprimez cette option sélectionnée // La case à cocher est définie sur $ non cochée ("div.pop_sele"). Find ("div"). Find ("input [type = 'checkbox']: vérifié"). Chaque (fonction () {if ($ (this) .val () == val) {$ (this) .Attr ("chérite", false);}}); // Modifiez la valeur de catégorie de département CG_STR = cg_str.replace (val + '/', ""); type = type.replace (labelVal + '+', ""); num -;} // Fermez l'option de catégorie de département la fonction de case CheckReturn () {// Mettez la valeur dans la zone de texte 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); $ ('# roserpopwindow'). fadeout ();} </script>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.