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 option>";
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:

Literal_cityId.Text = "";//도시 ID 초기화
Literal_schoolId.Text = "";//학교 ID 초기화

백그라운드에서 선택값 가져오기

코드 복사 코드는 다음과 같습니다.

string cityId = Request.Form[" 도시"] == null ? "00000000-0000-0000-0000-000000000001": Request.Form["cities"]
string schoolId = Request.Form["schools "] == null ? "00000000-0000 -0000-0000-000000000001": Request.Form["schools"];

기본적으로는 그게 다입니다.
이제 js 링크 데이터 파일을 얻는 방법을 살펴보겠습니다

코드 복사 코드는 다음과 같습니다.

///

/// 지역 js 파일 생성
///

private void CreateRegions()
{
#region Get 지역 파일 정보
string _cities = "var 도시=new Array();
"
string _schools = "varschools=new Array();
"; 🎜>DAL.RegionInfo dalRegion = new DAL.RegionInfo();
#region 도시 정보
DataTable dtcity = dalRegion.GetList("parent_id='" "00000000-0000-0000-0000-000000000000" "'" ).Tables[0];
_cities = "cities ['" ParentId "']=[";
foreach(dtcity.Rows의 DataRow c)
{
_cities = "['" c["id"].ToString() "',' " c["name"].ToString() "'],";
#지역 학교 정보
DataTable dtschool = dalRegion.GetList(" parent_id ='" c["id"] "'"). 테이블[0];
if (dtschool == null || dtschool.Rows.Count == 0)
{
계속;
}
_schools = "schools['" c[ "id"].ToString() "']=["
foreach(dtschool.Rows의 DataRow s)
{
_schools = "['" s["id"].ToString() "','" s["name"].ToString() "'],"
}
_schools = _schools.TrimEnd(', ') "];
";
#endregion
}
_cities = _cities.TrimEnd(',') "];
"
# endregion
Response.Write(_cities "

")
Response.Write(_schools "

"); 🎜>#endregion
}

페이지에서 출력되는 js 링크 데이터를 js 파일에 직접 복사
3레벨 또는 다레벨로 변경할 수도 있습니다. 자신의 필요에 따라 연결하는 것도 같은 원리입니다.
모두에게 도움이 되길 바랍니다