js Dynamically Obtain Subcomplex Options and Design Implementation Method for Selection and Submission

When you are working on a project, you will encounter dynamic sub-options based on the parent option, list multiple check boxes, and submit in the background by merging the selected items into one character when submitting

This chapter describes how to do this through js control:

1: The design parent category is radio, with onclick events added to each radio, and the default category 1 is Selection.

<input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked="checked"/> Select All <br>
<input type="radio" name="lb" id="lb" value="1" onclick="getZlb(1);" checked="checked"/> category 1 
<input type="radio" name="lb" id="lb" value="2" onclick="getZlb(2);"/> category 2 
<input type="radio" name="lb" id="lb" value="3" onclick="getZlb(3);"/> category 3

2: When the page is initially loaded, the subcategories are displayed according to the selected parent category, and when the button is clicked, the subcategories are also obtained. Write the same method and call it after the page is loaded

window.onload=getZlb();

3: Get the js method of subcategory, get background data dynamically through ajax method

/**
 *  Get subcategories and perform display after page loading 
 */
 function getZlb(){
  // Get by name 
  var obj = document.getElementsByName("lb");
    for(var i=0; i<obj.length; i ++){
      if(obj[i].checked){
        getZlbNews(obj[i].value);
      }
  }
 }

function getZlbNews(){
    ( adopt Ajax Obtain map Type of data ; Return data is result,json format )
    var json = eval("("+result+")"); // translate into json object 
    // adopt ID Gets the area of the subtype to display 
    var parent=document.getElementById('xsqy');
    // Empty subareas to prevent next append 
    parent.innerHTML='';
    var p=0;
    var span="";
    // Check all selections 
    document.getElementById("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 the child check box exceeds 11 Yes, line break 
     if(p%11==0){
       span=span+"<br>";
     }
     // Put child check box 1 Append each to a subregion 
     parent.innerHTML=parent.innerHTML+span;
    } 
}

4:Background logic,

/**
   *  By subcategory, return Map format  Map< Code, name >
   * @return
   */
  public String getZLb(){
    Map<Integer, String> zlb=service.getZLB();
    // hold map translate into json format 
    JSON a= JSONSerializer.toJSON(zlb);
    return a.toString();
  }

5:js controls full selection, whether or not the logic is selected, and how the selected code is merged on submission

/**
  *  Select or Cancel All 
  */
 function selectAllDz(){
   var checkboxs = document.getElementsByName("zlb");
   for(var i=0; i<checkboxs.length; i++) {
 * // Controls whether subcategories are selected based on whether the fully selected button is selected 
     checkboxs[i].checked = document.getElementById("selectall").checked;
   }
 }
/**
 *  To determine if all subcategories are selected, select the All Select button, or uncheck 
 */
 function checkSelectAll(){
   var checkboxs = document.getElementsByName("zlb");
   var isSelectAll=true;
   for(var i=0; i<checkboxs.length; i++) {
     if(checkboxs[i].checked ==false){
       isSelectAll=false;
     }
   }
   if(isSelectAll==false){
     document.getElementById("selectall").checked=false;
   }else{
     document.getElementById("selectall").checked=true;
   }
 }
/**
*  Stitch Selected ID , separated by commas 
**/
function getAllIdStr(checkName){
  var select = document.getElementsByName(checkName);
   var idStr = new Array();
   for(var i=0; i<select.length; i++){
     if(select[i].checked==true){
       idStr = idStr.concat(select[i].value);
     }
   }
   return idStr.join(',');
}

6:In the next step, if submitting, change the selection to a character and assign it to a hidden text box for submitting to the background

// Call splicing ID Method that passes the name of the element to be manipulated to 
var allZlb=getAllIdStr('zlb');
// Establish 1 Hidden text boxes that are stitched together for background retrieval 
document.getElementById('allZlbStr').value=allZlb;

These are just personal suggestions. Please let us know if you have any better suggestions.