jquery Ajax implementation of the dropdown box three-level no refresh linkage, and save to keep the selected value state _jquery

function: Province, city, district three-level linkage, using jquery Ajax data binding, page refresh or submit selected values can be saved and remain selected

Put the following code in a separate JS file, referenced on the page can call

Copy Code code as follows:

Get 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 Cookie Value
function Writecookie (name, value, hours, ESCP) {
var expire = "";
if (hours!= null) {
expire = new Date (new Date ()). GetTime () + hours * 3600000);
expire = "; Expires= "+ expire.togmtstring ();
}
if (ESCP = = "True") {
Document.cookie = name + "=" + value + expire;
} else {
Document.cookie = name + "=" + Escape (value) + expire;
}
}

Selection of sectional conditions for urban, watershed, river systems
$ (function () {

var $ddlprovince = $ ("#ddlProvince"); Provinces
var $ddlcity = $ ("#ddlCity"); City
var $ddlarea = $ ("#ddlAreaName"); Regional

Query the city according to the province
$ddlprovince. focus (); Do not add focus, otherwise set selected has a problem
$ddlprovince. Bind ("Change KeyUp", function () {
if ($ (this). Val ()!= "-1") {
Loadwater ($ (this). Val (), "selectcity");
} else {
$ ("select[id$=ddlcity] > option"). Remove ();
$ddlcity. Append ($ ("<option></option>"). Val ("1"). HTML ("--Please Select-"));
}
The region will be initialized with a new selection of provinces or a new city.
$ ("Select[id$=ddlareaname] > option"). Remove ();
$ddlarea. Append ($ ("<option></option>"). Val ("1"). HTML ("--Please Select-"));
});

If the city is not populated with data, the provinces have selected data to load the data
if ($ ("select[id$=ddlcity] > option"). length = = 1 && $ddlprovince. Val ()!= "-1") {

Loadwater ($ddlprovince. Val (), "selectcity");
Read the cookie, and the value is set to the selected state
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");
}
}

   //According to City query area
   //$ddlcity. focus ();
    $ddlcity. Bind ("Change KeyUp", function () {
        if ( This). Val ()!= '-1 ') {
            loadwater ($ (this). val (), "selectareaname");
           //Check value save cookies
             Writecookie ("Jq_cityname", $ (this). Val (), 0.5, true);
       } else {
             $ ("select[name$=ddlareaname] > option"). Remove ();
            $ddlarea. Append ($ ("<option></ Option> "). Val ("-1 "). HTML ("--Please Select-"));
       }
   });

If the zone name is not populated with data, the city has selected data to load the data
if ($ ("select[id$=ddlareaname] > option"). length = = 1 && $ddlcity. Val ()!= "-1") {
Loadwater ($ddlcity. Val (), "selectareaname");
Read the cookie, and the value is set to the selected state
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") {
Select Value Save Cookie
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 city

$ ("select[name$=ddlcity] > option"). Remove (); Delete the original option
$ ("select[id$=ddlcity]"). Append ($ ("<option></option>"). Val ("-1"). HTML ("--Please Select-"));

for (var i = 0; i < data.length; i++) {
$ ("select[id$=ddlcity]"). Append ($ ("<option></option>"). Val (data[i). City). html (Data[i]. City));
}
}
else if (TypeName = = "Selectareaname") {

$ ("Select[name$=ddlareaname] > option"). Remove (); Delete the original option
$ ("select[id$=ddlareaname]"). Append ($ ("<option></option>"). Val ("-1"). HTML ("--Please Select-"));

for (var i = 0; i < data.length; i++) {
$ ("select[id$=ddlareaname]"). Append ($ ("<option></option>"). Val (data[i). areaname). html (Data[i]. AreaName));
}
}
}

Description: The province data in the page load binding, the page submitted after the province value can be used Selectvalue, city, district selected data to use request["Idname"] get