Давайте посмотрим на эффект:
Эффект
-Пора
-Колкните флажок, и выбранные параметры отображаются в выбранном Div.
- Нажмите еще раз, чтобы снять статус, выбранная опция, отображаемая в выбранном DIV, отменит дисплей
-Click intorme x x в выбранном Div, чтобы отменить отображение опции и отменить соответствующий флажок, чтобы выбрать статус
-Ка, нажмите на основную категорию, подкатегория не выбран, нажмите на подкатегорию, выберите основную категорию, чтобы не определить состояние
- Можно выбрать до 3 вариантов
-Click x значок, чтобы закрыть всплывающее окно
-Click кнопку ОК, чтобы отобразить выбранные результаты
Кодовый блок
HTML -фрагмент кода
<div> <babel> Категория отделения: < /label> <div> <input type = "hidden" name = "cg_str" id = "cg_str" @if (input :: has ('cg_str')) value = "{{input :: get ('cg_str')}}" @endif /> <input = "text" name = "type" yd "" ID "" yd "}}}" @Endif /> <input = "name" = "" ID "" yD "" "wIt"}}} "@Endif /> <input =" " onclick = "getWindowPop ()" @if (input :: hess ('type')) value = "{{input :: get ('type')}}" @endif/> </div> </div> <!-Тип отдела href = "javascript: void (0);"> клиническая медицина </a> </li> <li> <a href = "javascript: void (0);"> Auxiliary Department </a> </li> <li> <a href = "javascript: void (0); onclick="$('#closePopWindow').fadeOut()"></a></li> </ul> <div></div> </div> <div > <!-- Clinical Medicine-S --> <div> <!-- Internal Medicine-S --> <div> <input type="checkbox" value="4" parent="1"/> <label>Internal Medicine</label> <div></div> </div> @foreach ($ olcyx1 as $ key => $ val) <div> <input type = "fackbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <backel> {{$ val-> name}} </label> <div> </diver> <div> @endeach </diver> <div> <div> @endeach </diveme-ferice </diver> -> <!-Surgery-s-> <div> <input type = "fackbox" value = "5" parent = "1"/> <Babel> хирургическое вмешательство </label> <div> </div> </div> @Foreach ($ olcyx2 как $ key => $ val) <div> <input type = "value =" {{$ val- Id}}}} " parent = "{{$ val-> parent_id}}"/> <Babel> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> <!-Surgery-e-> <!-Другие-> <div> <input value = value = "6" Parent = Parent = '1 " <div> </div> </div> @foreach ($ olcyx3 as $ key => $ val) <div> <input type = "fackbox" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <babel> {$ val-> name}} </label> <div> <//> <Babel> {$ val->} </div> <//> <Babel> {$ val- <div> </div> <!-Другой-E-> </div> <!-Клиническая медицина-e-> <!-вспомогательное отделение-s-> <div> <div> <div> </div> </div> @foreach ($ ofzks as $ key => $ al) <div> <input type = value = "{{$ val-> id}}" " parent = "{{$ val-> parent_id}}"/> <babel> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> </div> <!-Auxiliary Department-e-> <!-Pharmaceutical Company-s-div> <div> <div> <div> <div> @foreach ($ oyygs as $ key => $ val) <div> <input type = "value =" {{$ val-> id}} "parent =" {{$ val-> parent_id}} "/> <Babel> {{$ val-> name}} </label> <div> <dive> </diver> @endeach </diver> @endeach </diving> </diver> @endeach </diving> </diver> @endeace </diver> </diver> </diver> @endeace </diver> Pharmaceutical Company-E-> </div> <!-Местоположение, которое появляется после выбранного сообщения --S-> <div> <div> <div> <div> Выбран: </div> <div> <div> </div> </div> <div> </div> </div> <div> <input type = value = "ok" onclick = "checkreurn (); Сообщение выбрано -e-> <!-Информационная подсказка-> <div id = "msg"> максимум 3 варианта </div> </div> </div> <!-Тип отдела->JS фрагмент кода
<script> // Определить начальную глобальную переменную var num = 1; // категория отделения необязательное число var cg_str = ''; // идентификатор категории отделения var type = ''; // Имя категории категории // обновить и сохранить выбранную $ (function () {var str = $ ("#cg_str"). val (); if (str. type = $ ("#type"). val ()+'+';} str = str.split ("/"); $ (this) .attr ("проверен", true); href = "javascript: void (0);" // Откройте флажок вариант категории отделения Idnumber (prefix) {var idnum = prefix; 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 = prefix + num; $ ('#'+content) .show (); $ ('#'+content) .siblings (). hide ();} function getWindowPop () {$ ("ul#Tagchange li"). Найти ("a"). removeClass ("sele"); $ ("ul#TagChange li: первый ребенок a"). addClass ("sele"); $ ("div.pop_sele_cont_box"). Найти ("div.pop_sele: первый ребенок"). 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"). Index (this);}); $ ('#closePopWindow'). Show ();} $ ("ul#TagChange li: не (: last-cild)"). Click (function () {var c = $ ("ul#tagchange li"); var index = c.index (this); if (index <3) {var p = idnumber ("no"); Категория $ ("div.pop_sele"). Найти ("div"). Найти ("input [type = 'facebox']"). Click (function () {var val = $ (this) .val (); var labelval = $ (this) .next ('label'). html (). trim (); var parent = $ (this). if ($ (this) .is (": checked")) {// select Process // Вариант класса размера процесса $ ("div.pop_sele"). Найти ("div"). Найти ("input [type = 'fackbox']: cherced"). Каждый (function () {if ($ (this) .val () == parent || $ (this). $ (this) .attr ("проверен", false); Lab) {var index = $ ("div.department_block"). Найти ("div.left"). Index (this); ""); num--; } }); } }); //Judge num value if(num > 3){ $('#msg').html("up to 3 options"); $('#msg').fadeIn(); setTimeout(function(){$('#msg').fadeOut();},1000); return false; } cg_str += Val + '/'; type + = labelval + ' +'; $ ("div.right_block"). Append (html); $ ("div.department_block"). Найти ("div.left"). Index (this); num--; var labelval = $ (obj) .parent (). parent (). find ("div.left"). html (). trim (); $ ("div.department_block"). eq (index) .remove (); // Удалить эту выбранную опцию // флажок установлен на неконтролируемое $ ("div.pop_sele"). Найти ("div"). Найти ("input [type = 'fackbox']: checked"). Каждый (function () {if ($ (this) .val () == val) {$ (this) .attr ("werted", false); // Измените значение категории отдела 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 больше.