Jqueryajax implements three-level unrefresh linkage in the drop-down box and saves and keeps the selected value status _ jquery

Jqueryajax implements three levels of unrefresh linkage in the drop-down box, and saves and retains the selected values. For more information, see <G id = "1"> function </G>, after the page is refreshed or submitted, the selected values can be saved and kept in the selected status.

Put the following code in a separate js file and reference it on the page to call

The Code is as follows:

// Obtain the cookie value
Function readCookie (name ){
Var cookieValue = "";
Var search = name + "= ";
If (document. cookie. length> 0 ){
Offset = document. cookie. indexOf (search );
If (offset! =-1 ){
Offset + = search. length;
End = document. cookie. indexOf (";", offset );
If (end =-1) end = document. cookie. length;
CookieValue = unescape (document. cookie. substring (offset, end ))
}
}

Return cookieValue;
}

// Save the cookie value
Function writeCookie (name, value, hours, escp ){
Var expire = "";
If (hours! = Null ){
Expire = new Date (). getTime () + hours * 3600000 );
Expire = "; expires =" + expire. toGMTString ();
}
If (escp = "True "){
Document. cookie = name + "=" + value + expire;
} Else {
Document. cookie = name + "=" + escape (value) + expire;
}
}

// Select provincial/municipal, watershed, water system, and section Conditions
$ (Function (){

Var $ ddlprovince = $ ("# ddlProvince"); // Province
Var $ ddlcity = $ ("# ddlCity"); // City
Var $ ddlarea = $ ("# ddlAreaName"); // Region

// Query cities by province
// $ Ddlprovince. focus (); // do not add focus. Otherwise, there is a problem with selected settings.
$ Ddlprovince. bind ("change keyup", function (){
If ($ (this). val ()! = "-1 "){
LoadWater ($ (this). val (), "SelectCity ");
} Else {
$ ("Select [id $ = ddlCity]> option"). remove ();
$ Ddlcity. append ($ (""). Val ("-1 ").html (" -- select --"));
}
// The region is initialized from the selected province or from the selected city.
$ ("Select [id $ = ddlAreaName]> option"). remove ();
$ Ddlarea. append ($ (""). Val ("-1 ").html (" -- select --"));
});

// If the city is not filled with data and the province selects data, the data is loaded.
If ($ ("select [id $ = ddlCity]> option"). length = 1 & $ ddlprovince. val ()! = "-1 "){

LoadWater ($ ddlprovince. val (), "SelectCity ");
// Read the cookie. If the cookie has a value, it is set to the selected status.
Var cityname = readCookie ("JQ_CityName ");
If (cityname! = Null & cityname! = "Undefined" & cityname! = ""){

// $ ("Select [id = ddlWaterXiName]> option: contains ('" + watername + "')"). attr ("selected", "true ");
$ ("Select [id $ = ddlCity]> option [value = '" + cityname + "']"). attr ("selected", "true ");
}
}

// Query the region by city
// $ Ddlcity. focus ();
$ Ddlcity. bind ("change keyup", function (){
If ($ (this). val ()! = "-1 "){
LoadWater ($ (this). val (), "SelectAreaName ");
// Store the cookie with the selected value
WriteCookie ("JQ_CityName", $ (this). val (), 0.5, true );
} Else {
$ ("Select [name $ = ddlAreaName]> option"). remove ();
$ Ddlarea. append ($ (""). Val ("-1 ").html (" -- select --"));
}
});

// If the zone name is not filled with data and the city selects data, the data is loaded.
If ($ ("select [id $ = ddlAreaName]> option"). length = 1 & $ ddlcity. val ()! = "-1 "){
LoadWater ($ ddlcity. val (), "SelectAreaName ");
// Read the cookie. If the cookie has a value, it is set to the selected status.
Var areaname = readCookie ("JQ_AreaName ");
If (areaname! = Null & areaname! = "Undefined" & areaname! = ""){

$ ("Select [id = ddlAreaName]> option [value = '" + areaname + "']"). attr ("selected", "true ");

}
}

$ Ddlarea. bind ("change keyup", function (){
If ($ (this). val ()! = "-1 "){
// Store the cookie with the selected value
WriteCookie ("JQ_AreaName", $ (this). val (), 0.5, true );
}

});
});

Function loadWater (selectedItem, typename ){
$. Ajax ({
Type: "GET ",
Url: "/GetWaterxiname. ashx ",
Data: {usetype: typename, id: selectedItem },
ContentType: "application/json; charset = UTF-8 ",
DataType: "json ",
Async: false,
Success: function Success (data ){
BindWater (data, typename );
}
});
}

Function bindWater (data, typename ){

If (typename = "SelectCity") {// bind a city

$ ("Select [name $ = ddlCity]> option"). remove (); // Delete the original option
$ ("Select [id $ = ddlCity]"). append ($ (""). Val ("-1 ").html (" -- select --"));

For (var I = 0; I <data. length; I ++ ){
$ ("Select [id $ = ddlCity]"). append ($ (""Maid (data [I]. City ));
}
}
Else if (typename = "SelectAreaName "){

$ ("Select [name $ = ddlAreaName]> option"). remove (); // Delete the original option
$ ("Select [id $ = ddlAreaName]"). append ($ (""). Val ("-1 ").html (" -- select --"));

For (var I = 0; I <data. length; I ++ ){
$ ("Select [id $ = ddlAreaName]"). append ($ (""Maid (data [I]. AreaName ));
}
}
}

Note: The province data is bound when the page is loaded. After the page is submitted, the province value can be obtained using selectvalue, city, and district selected data can be obtained using Request ["idname "].