효과를 살펴 보겠습니다.
효과
-상자를 팝업하도록 클릭하십시오
-확인란을 클릭하면 선택한 옵션이 선택한 div에 표시됩니다.
- 다시 클릭하여 상태를 선택 취소하면 선택한 DIV에 표시된 선택한 옵션이 디스플레이를 취소합니다.
-선택한 DIV에서 옵션 X 아이콘을 클릭하여 옵션 표시를 취소하고 해당 확인란을 취소하여 상태를 선택하십시오.
-주요 범주를 클릭하면 하위 카테고리가 선택되지 않고 하위 범주를 클릭하고 주요 범주를 선택하여 상태를 선택하지 않습니다.
- 최대 3 가지 옵션을 선택할 수 있습니다
-X 아이콘을 클릭하여 팝업 상자를 닫습니다
확인 버튼을 클릭하여 선택한 결과를 표시하십시오
코드 블록
HTML 스 니펫 코드
<div> <lable> 부서 카테고리 : < /label> <div> <입력 유형 = "hidden"name = "cg_str"id = "cg_str"@if (input :: has ( 'cg_str')) value = "{입력 :: get ( 'cg_str')}}"@endif /> <input type = "taint"id "id"id "id"id "id"id " onclick = "getWindOwPop ()"@if (입력 :: has ( 'type')) value = "{{input :: get ( 'type')}}" @endif/> </div> </div> <!-부서 유형 시작-> <div id = "closePopwindow"style = "display : none <"> <id <li <li> <ul div> <ul div> <div> <div> <div> <div> href = "javaScript : void (0);"> 임상 의학 </a> </li> <li> <a href = "javaScript : void (0);"> 보조 부서 </a> </a> </li> <li> <a href = "javascript : void (0);"> </li> <li> <a onclick = "$ ( '#closePopWindow'). fadeout ()"> </a> </li> </ul> <div> </div> <div> <!-임상 의학--> <div> <!-내부 의학 s-> <div> <입력 유형 = "checkbox"4 "4" "divic </div> <label> 내부 의학 </div> <div> <div> <div> <div> <div> @foreach ($ olcyx1 as $ key => $ val) <div> input type = "checkbox"value = "{{$ val-> id}}"parent = "{{$ val-> parent_id}"/> <label> {{$ val-> name} </label> </div> </div>-</div> </div> <! <!-Surgery-S-> <div> <입력 유형 = "checkbox"value = "5"parent = "1"/> <lable> 수술 </div> </div> </div> @foreach ($ olyx2 as $ key => $ val) <div> <입력 유형 = "checkbox"value = "{{$ val-> id}}" parent = "{{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> <div> </div> @endforeach <div> </div> <!-수술-> <!-기타-> <div> <input type = "checkbox ="6 "</div> <elabe> <levable> </div> @foreach ($ olyx3 as $ key => $ val) <div> <div> <input type = "checkbox"value = "{{$ val-> id}}"parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> </div> </div> <! 기타 -e-> </div> <!-임상 의학 -e-> <!-보조 부서-> <div> <div> <div> </div> @foreach ($ ofzks as $ key => $ val) <div> <입력 유형 = "checkbox"value = "{$ val-> id}}"{val val-> parer_}} "> <lable> {{$ val-> name}} </label> <div> </div> </div> @endforeach </div> </div> <!-보조 부서 -e-> <!-Pharmaceutical Company-S-> <div> <div> <div> </div> @$ key as $ key => $ ky => $ ky => 유형 = "checkbox"value = "{{{$ val-> id}}"parent = "{{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> </div> </div> <! <! 선택된-> <div> <div> <div> <div> 선택한 : </div> <div> <div> </div> </div> </div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> <div> </div> <div> <input type = "value ="ok "onclick ="checkreturn (); "/> </div> </div> <! id = "msg"> 최대 3 옵션 </div> </div> </div> <!-부서 유형 끝->JS 스 니펫 코드
<cript> // 초기 전역 변수 var num = 1; // 부서 카테고리 옵션 번호 var cg_str = ''; // 부서 카테고리 ID 문자열 var type = '; // 부서 범주 이름 문자열 // 새로 고침 및 선택 $ () {var str = $ ( "#cg_st"). = $ ( "#type"). val ()+'+'; $ (this) .attr ( "확인", true = $ (this). "javaScript (0);" + val + '; // 부서 카테고리 옵션 상자 함수 idnumber (접두사) {var idnum = prefix; return idnum;} 함수 show_hidden (controlmenu, num, prefix) {controlmenu.eq (num) .siblings (). find ( 'a'). removeclass ( "sele"); controlmenu.eq (num) .find ( 'a'). addClass ( "sele"); var content = prefix + num; $ ( '#'+content) .show (); $ ( '#'+content) .siplings (). hide ();} 함수 getWindowPop () {$ ( "ul#tagchange li"). 찾기 ( "a"). removeClass ( "sele"); $ ( "ul#tagchange li : 1 차 자녀 a"). addClass ( "sele"); $ ( "div.pop_sele_cont_box"). 찾기 ( "div.pop_sele : first-Child"). show (); $ ( "div.pop_sele_cont_box"). 찾기 ( "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"). 색인 (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"); $ ( "div.pop_sele"). find ( "div"). 찾기 if ($ (this) .is ( ": checked")) {// 프로세스 // 프로세스 크기 클래스 옵션 $ ( "div.pop_sele"). 찾기 ( "div"). 찾기 ( "input [type = 'checkbox'] : checked"). $ (this) .attr ( "Checked", false); var v = $ (var lab = $) .next ( 'label'). html (). index = $ (div.department_block "). ("div.left "). index ("div.department_block "). }}}; html ( '#msg') ' +';//html = '<div>' + '<div>' + labelVal + '</div>'<<div> '<a href = "javaScript : void (0); $ ( "div.right_block"). Append (html); $ ( "div.department_block"). index ( "div.department_block"). eq (index). }});}}); // 선택한 옵션 함수를 지우십시오 (OBJ, val) {var index = $ ( "div.department_block"). 찾기 ( "div.right"). find ( "a"). index (obj); var labelVal = $ (obj) .parent (). parent (). find ( "div.left"). html (). trim (); $ ( "div.department_block"). eq (index) .remove (); // 선택한 옵션을 제거하십시오. // 확인란이 선택되지 않은 $로 설정됩니다 ( "div.pop_sele"). 찾기 ( "div"). 찾기 ( "입력 [입력 [type = 'checkbox'] : checked"). // 부서 카테고리 값 수정 값 cg_str = cg_str.replace (val + '/', ""); type = type.replace (labelVal + ' +', ""); num-;} // 부서 범주 옵션 옵션 상자 함수 checkreturn () {// 값을 텍스트 상자에 넣습니다 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>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.