When working on a project, you will encounter dynamically obtaining child options based on the parent options and listing multiple check boxes. When submitting, merge the selected ones into one character and submit them to the background.
This chapter will tell you how to implement this operation through js control:
1: Design the parent category as radio, add onclick event to each radio, and default category 1 is the selection state.
<input type="checkbox" name="selectall" onClick="selectAll();" checked="checked"/>Select all<br> <input type="radio" name="lb" value="1" onclick="getZlb(1);" checked="checked"/>category1 <input type="radio" name="lb" value="2" onclick="getZlb(2);"/>category2 <input type="radio" name="lb" value="3" onclick="getZlb(3);"/>category3
2: When the page is loading initially, the subcategory should be displayed according to the selected parent category. When clicking the button, the subcategory should also be obtained, so it is written as the same method and called after the page loading is completed.
=getZlb();
3: Get the js method of subcategory, dynamically obtain background data through the ajax method
/**
* Get subcategory and display it after the page loading is finished
*/
function getZlb(){
//Get by name var obj = ("lb");
for(var i=0; i<; i ++){
if(obj[i].checked){
getZlbNews(obj[i].value);
}
}
}
function getZlbNews(){
(passAjaxGetmapTypes of data;Return data asresult,jsonFormat)
var json = eval("("+result+")"); //Convert to json object //Get the area to be displayed by the subtype through ID var parent=('xsqy');
//Put the sub-area empty to prevent additional additions next time ='';
var p=0;
var span="";
//Check all selection ("selectall").checked=true;
for(var i in json){
p++;
span="<SPAN style=\"display:inline-block; width: 75px;\"><input type=\"checkbox\" checked=\"checked\" onClick=\"checkSelectAll();\" name=\"zlb\" value=\""+i+"\">"+json[i]+"</SPAN>";
//When there are more than 11 sub-check boxes, then the line break if(p%11==0){
span=span+"<br>";
}
//Add sub-check boxes to sub-regions one by one =+span;
}
}
4: Background logic,
/**
* Return Map format Map<code, name> through subcategory
* @return
*/
public String getZLb(){
Map<Integer, String> zlb=();
//Convert map to json format JSON a= (zlb);
return ();
}
5: js controls the logic of whether to select all, and whether to select all, and how to merge the selected code when submitting
/**
* Select all or cancel all
*/
function selectAllDz(){
var checkboxs = ("zlb");
for(var i=0; i<; i++) {
//Control whether the subcategory is selected based on whether the selected button is selected or not. checkboxs[i].checked = ("selectall").checked;
}
}
/**
* To determine whether the subcategory is selected, select all buttons, otherwise they will not be selected.
*/
function checkSelectAll(){
var checkboxs = ("zlb");
var isSelectAll=true;
for(var i=0; i<; i++) {
if(checkboxs[i].checked ==false){
isSelectAll=false;
}
}
if(isSelectAll==false){
("selectall").checked=false;
}else{
("selectall").checked=true;
}
}
/**
* Splice the selected IDs, separated by commas
**/
function getAllIdStr(checkName){
var select = (checkName);
var idStr = new Array();
for(var i=0; i<; i++){
if(select[i].checked==true){
idStr = (select[i].value);
}
}
return (',');
}
6: When performing the next operation, if you submit, turn all selected into one character and assign it to a hidden text box to submit it to the background
//Call the splicing ID method and pass the name of the element to be operated overvar allZlb=getAllIdStr('zlb');
//Create a hidden text box, assign the spliced content to the background to obtain('allZlbStr').value=allZlb;
The above is just a personal opinion. If you have any better solutions, please let me know.
The above is the full content of the implementation method of dynamically obtaining sub-complex options and designing all selections and submissions brought to you. I hope everyone supports me~