js operation secondary linkage implementation code_javascript skills-JS Tutorial-php.cn

js operation secondary linkage implementation code_javascript skills

WBOY

Release： 2016-05-16 18:22:19

Original

1114 people have browsed it

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--%>