Vamos dar uma olhada no efeito:
Efeito
-Clique para aparecer a caixa
-Clique a caixa de seleção e as opções selecionadas são exibidas na div.
- Clique novamente para desmarcar o status, a opção selecionada exibida no DIV selecionada cancelará a tela
-Clique o ícone da opção x na div para cancelar a exibição da opção e cancelar a caixa de seleção correspondente para selecionar o status
-Clique na categoria Principal, a subcategoria não é selecionada, clique na subcategoria, selecione a categoria principal para não selecionar o estado
- Até 3 opções podem ser selecionadas
-Clique o ícone x para fechar a caixa pop-up
-Clique o botão OK para exibir os resultados selecionados
Bloco de código
Código do trecho HTML
<div> <brety> categoria de departamento: </crety> <div> <input type = "hidden" name = "cg_str" id = "cg_str" @if (input :: has ('cg_str')) value = "{{{input:" text ('cg_str')}} "" @END /> <inpype = "typen)" typen = typen) {{{{type type ") OnClick = "getWindowpop ()" @if (input :: has ('type')) value = "{{input :: get ('type')}}" @endif/> </div> </div> <!-tipo de departamento start-> <div = "ClosePOPWindow" Style = "Display: NING;" "> href = "javascript: void (0);"> medicina clínica </a> </li> <li> <a href = "javascript: void (0);"> departamento auxiliar </a> </li> <li> <a href = "javscript: void ();"> outros </a> ONCLICK = "$ ('#ClosePopWindow'). Fadeout ()"> </a> </li> </ul> <div> </div> </div> <div> <!-Medicina clínica-s-> <div> <!-Medicina interna-s-> <div> <input type = "Check/") @ForEach ($ olCyx1 como $ key => $ val) <div> <input type = "Caixa de seleção" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <bel> {{$ val-> name}} </etc. <!-cirurgia-s-> <div> <input type = "Caixa de seleção" value = "5" parent = "1"/> <brety> cirurgia </elabel> <div> </div> </div> @foreach ($ olcyx2 como $ key => $ val) <div> <input type = "caixa de seleção Parent = "{{$ val-> parent_id}}"/> <breting> {{$ val-> name}} </elabel> <div> </div> </div> @endForEach <div> </div> <!-cirurgia-e-> <!-outros <div> <dut Type = "Check <! </div> @ForEach ($ olCyx3 como $ key => $ val) <div> <input type = "Caixa de seleção" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <bret> {{$ Val-> Nome}} </</> <div> Other-e-> </div> <!-Medicina Clínica-e-> <!-Departamento Auxiliar-S-> <div> <div> <div> </div> </div> @foreach ($ ofzks como $ key => $ val) <div> <input Type = "CheckBox" = "{{$ val->}}}" <Boel> {{$ val-> name}} </elabel> <div> </div> </div> @endforeach <div> </div> </div> <!-departamento auxiliar-e-> <!-Valaceutical Company-s-> <div> <div> <div> <div> <! type = "Caixa de seleção" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <belt> {{{$ val-> name}} </celt> <div> </div> </div </divhandForEach <div> </div> </!-Empresa <! -S-> <div> <div> <div> <div> selecionado: </div> <div> <div> </div> </div> <div> </div> </div> <div> <input type = "button" value = "ok" onclick = "checkreng (); id = "msg"> máximo 3 opções </div> </div> </div> <!-Tipo de departamento final->JS Snippet Code
<SCRIPT> // Defina a variável global inicial var num = 1; // Categoria de departamento Número opcional var cg_str = ''; // categoria de departamento string string var Type = ''; // categoria de departamento string // atualizar e manter selecionado $ (function () {var = $ ("#cg_str"). Tipo = $ ("#tipo"). Val ()+'+'; $ (this) .attr ("verificado", verdadeiro); ONCLICK = "Removeseleiro (this, 'Val +');"> </a> ' +' </div> ' +' </div> '; // Abra a caixa de opção da categoria de departamento IdNumber (prefixo) {var idnum = prefixo; retornar idnum;} função show_hidden (controlmenu, num, prefixo) {controlmenu.eq (num) .siblings (). find ('a'). removeclass ("sele"); controlmenu.eq (num) .find ('a'). addclass ("sele"); var content = prefixo + num; $ ('#'+content) .show (); $ ('#'+content) .siBlings (). hide ();} função getWindowpop () {$ ("ul#tagchange li"). find ("a"). removeclass ("sele"); $ ("ul#tagchange li: primeiro filho a"). addclass ("sele"); $ ("div.pop_sele_cont_box"). Find ("div.pop_sele: primeiro filho"). show (); $ ("div.pop_sele_cont_box"). Find ("div.pop_sele: não (: primeiro filho)"). hide (); $ ("div.pop_sele_cont_box div.pop_sele"). att ("id", function () {return idnumber ("não")+ $ ("div.pop_sele_cont_box div.pop_sele"). index (this);}); $ ('#closepopwindow'). show ();} $ ("ul#tagchange li: não (: Última filho)"). clique (function () {var c = $ ("ul#tagchange li"); var index = c.index (this); if (index <3) {var p = idnumber ("não"); $ ("div.pop_sele"). encontre ("div"). encontre ("entrada [tipo = 'caixa de seleção']"). Clique (function () {var if ($ (this) .is (": checked")) {// selecione Process // Tamanho do processo Class de classe Opção $ ("div.pop_sele"). find ("div"). Find ("input [type = 'CheckBox']: checked"). cada (function () {if ($). $ (this) .attr ("verificado", false); = $ (Div.Department_block "). Find (" Div.Left "). }); // coloque -o no Div selecionado var html = '<div>' + '<div>' + labelval + '</div>' + '<div>' + '' <a href = "javascript: void (0); "Div.right_block"). Appender (html); $ ("Div.Department_block"). Find ("Div.Left"). }}); var labelVal = $ (obj) .parent (). Parent (). Find ("Div.Left"). Html (). TRIM (); $ ("Div.Department_block"). Eq (índice) .remove (); // Remova esta opção selecionada // A caixa de seleção está configurada como não é controlada $ ("div.pop_sele"). Find ("div"). Find ("input [type = 'Caixa de seleção']: verificado"). Cada (function () {if ($ (this) .val () ==) {$ (this) .attr ("checked"; // modifica o valor da categoria de departamento cg_str = cg_str.replace (val + '/', ""); type = type.Replace (LabelVal + ' +', ""); NUM-;} // Fechar a função da caixa da opção de categoria de departamento checkRurn () {// Coloque o valor na caixa de texto var cg_ids = cg_str.substring (0, CG_ST.Length-1); var type_str = type.substring (0, tipo.Length-1); $ ("#cg_str"). val (cg_ids); $ ("#tipo"). val (type_str); $ ('#closepopwindow'). Fadeout ();} </sCript>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.