Let's take a look at the effect:
Effect
-Click to pop up the box
-Click the check box, and the selected options are displayed in the selected div.
- Click again to uncheck the status, the selected option displayed in the selected div will cancel the display
-Click the option x icon in the selected div to cancel the display of the option, and cancel the corresponding check box to select the status
-Click on the major category, the subcategory is unselected, click on the subcategory, select the major category to unselect the state
- Up to 3 options can be selected
-Click the x icon to close the pop-up box
-Click the OK button to display the selected results
Code block
html snippet code
<div> <label>Department Category: </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" onClick="getWindowPop()" @if(Input::has('type')) value="{{Input::get('type')}}" @endif/> </div></div> <!-- Department type start --><div id="closePopWindow" style="display: none;"> <div></div> <div> <ul id="tagChange"> <li><a href="javascript:void(0);">Clinical Medicine</a></li> <li><a href="javascript:void(0);">Auxiliary Department</a></li> <li><a href="javascript:void(0);">Other</a></li> <li><a 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="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- Internal Medicine-E --> <!-- Surgery-S --> <div> <input type="checkbox" value="5" parent="1"/> <label>Surgery</label> <div></div> </div> @foreach($oLcyx2 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- Surgery-E --> <!-- Others --> <div> <input type="checkbox" value="6" parent="1"/> <label>Other</label> <div></div> </div> @foreach($oLcyx3 as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" parent="{{$val->parent_id}}"/> <label>{{$val->name}}</label> <div></div> </div> @endforeach <div></div> <!-- Other-E --> </div> <!-- Clinical Medicine-E --> <!-- Auxiliary Department-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> </div> @endforeach <div></div> </div> <!-- Auxiliary Department-E --> <!-- Pharmaceutical Company-S --> <div> <div> <div> <div></div> </div> @foreach($oYygs as $key=>$val) <div> <input type="checkbox" value="{{$val->id}}" 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 -->js snippet code
<script>//Define the initial global variable var num = 1;//Department category optional number var cg_str = '';//Department category id string var type = '';//Department category name string//Refresh and keep selected $(function(){ var str = $("#cg_str").val(); if(str.length < 1){ return false; }else{ cg_str = str + '/'; type = $("#type").val() + '+'; } str = str.split("/"); for(var i = 0; i < str.length; i++){ $("div.pop_sele").find("div").find("input[type='checkbox']").each(function(){ if($(this).val() == str[i]){ $(this).attr("checked", true); var Val = $(this).val(); var labelVal = $(this).next("label").html().trim(); //Put it in selected div var html = '<div>' + '<div>' + labelVal + '</div>' + '<div>' + '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>' + '</div>' + '</div>'; $("div.right_block").append(html); num++; } }); }}); //Open the department category option box function 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").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: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:not(: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); }});//Select department category $("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")){//Select Process//Process Size Class option $("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){ if($(this).val() == parent || $(this).attr("parent") == Val){ $(this).attr("checked", false); var v = $(this).val(); var lab = $(this).next('label').html().trim();//Current object label value $("div.department_block").find("div.left").each(function(){ if($(this).html().trim() == lab){ var index = $("div.department_block").find("div.left").index(this); $("div.department_block").eq(index).remove();//Remove this selected option//Modify department category value cg_str = cg_str.replace(v + '/', ""); type = type.replace(lab + '+', ""); 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 + '+'; //Put it in selected div var html = '<div>' + '<div>' + labelVal + '</div>' + '<div>' + '<a href="javascript:void(0);" onclick="removeSelector(this, ' + Val + ');"></a>' + '</div>' + '</div>'; $("div.right_block").append(html); num++; }else{//$(this).attr("checked", false); $("div.department_block").find("div.left").each(function(){ if($(this).html().trim() == labelVal){ var index = $("div.department_block").find("div.left").index(this); $("div.department_block").eq(index).remove();//Remove the selected option//Modify the department category value cg_str = cg_str.replace(Val + '/', ""); type = type.replace(labelVal + '+', ""); num--; } }); }});//Clear the selected option function removeSelector(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(); //Remove this selected option//Check box is set to unchecked $("div.pop_sele").find("div").find("input[type='checkbox']:checked").each(function(){ if($(this).val() == val){ $(this).attr("checked", false); } }); //Modify the department category value cg_str = cg_str.replace(val + '/', ""); type = type.replace(labelVal + '+', ""); num--;}//Close the department category option box function checkReturn(){ //Put the value into the text box 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>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.