js operation secondary linkage implementation code_javascript skills

Table structure
Second-level or multi-level linkage is mainly based on the table with parent number in the database, and this is no exception
Three columns of id, parent_id, name.

Using js operation
Let’s first talk about how data is stored in js.
Mainly use two-dimensional arrays to store data. The structure is as follows:
a[parent number]=[[child number 1, child name 1], [child number 2, child name 2], [child number 3, child name 3],…];
First, use the parent number to get all the child data, and then bind the number and name of the child data in dropdown

The first step is the second-level linkage data (how to get these data later)

Copy code The code is as follows:

var cities=new Array();
cities ['00000000-0000-0000-0000-000000000000']=[['028db215-8bd7-45ab-bbaa-1efa175c35ca','Changchun'],['bcb32195-2a46-4cd1-9472-6383e8fa55cc',' Shenyang'] ];

var schools=new Array();
schools['028db215-8bd7-45ab-bbaa-1efa175c35ca']=[['5f22403a-7a59-4b7f-b62d-9451298cbd00','Changchun 1'],['e8f0f665-9a9a-4c44-83fd-598e8a28dcd7','Changchun 2']]; -a44e-8d169d715664','Shenyang 1']];

The first level is city data, and the second level is school data. The second step is to set the data to be displayed in dropdown

Copy the code The code is as follows:

//Get the corresponding child data based on the parent number and display it in the obj control
//type=0 city, 1 school
//pid parent number
//obj to Dropdown to display data
function SetRegions(type,pid,obj)
{
var text="Please select";
var tempArray=new Array();
if(type==0){
tempArray=cities[pid];
} else if (type==1){
tempArray=schools[pid];;
}
if(tempArray!=null)
{
for(var i=0;i text ="" tempArray[i][1] "";
}
}
$( obj).html(text);
}

In the third step, when the city changes, select school data

Copy code The code is as follows:

//Set school sub-data with city number
function CityChanged(){
SetRegions (1,$("#cities").val(),"#schools");
}

The fourth step is of course when modifying Initialization is required, which was also my biggest headache before

Copy the code The code is as follows:

//Initialize city school value
//cityId city number
//schoolId school number
function InitRegions(cityId,schoolId)
{
//Initialize city data
//SetRegions(0,"00000000-0000-0000-0000-000000000000","#cities");
//Find the city and set it as the default value
$("#cities option[value =" cityId "]").attr("selected","selected");
if(schoolId!="00000000-0000-0000-0000-000000000001"){
//Initialize school data
SetRegions(1,cityId,"#schools");
//Find a school and set it as the default value
$("#schools option[value=" schoolId "]").attr("selected", "selected");
}
}

Front-end code

Copy code The code is as follows:

<%--City--%>


<%--school--%>

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills