Jquery ajax drop down box three no refresh linkage and save to keep the selected value state

  • 2020-03-26 21:42:44
  • OfStack

Function: province, city, region three level linkage, using jquery ajax to take data binding, page refresh or submitted after the selected value can be saved and keep the selected state

Place the following code in a separate js file and refer to it on the page


//Get 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((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 conditions for provinces, urban areas, river basins, river systems and sections
$(function() {
    var $ddlprovince = $("#ddlProvince");     // provinces 
    var $ddlcity = $("#ddlCity");      // city 
    var $ddlarea = $("#ddlAreaName");         // area 

    //Query cities by province
    //$ddlprovince.focus(); // Don't add focus, Otherwise set selected There is 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 a --"));
        }
        //Areas will be initialized when a new province is selected or a new city is selected
        $("select[id$=ddlAreaName] > option").remove();
        $ddlarea.append($("<option></option>").val("-1").html("-- Please select a --"));
    });

    //If the city does not populate the data, the province selects the data and loads it
    if ($("select[id$=ddlCity] > option").length == 1 && $ddlprovince.val() != "-1") {

        loadWater($ddlprovince.val(), "SelectCity");
        //Read the cookie and set it to the selected state if there is a value
        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 areas by city
    //$ddlcity.focus();
    $ddlcity.bind("change keyup", function() {
        if ($(this).val() != "-1") {
            loadWater($(this).val(), "SelectAreaName");
            //The selected value stores the cookie
            writeCookie("JQ_CityName", $(this).val(), 0.5, true);
        } else {
            $("select[name$=ddlAreaName] > option").remove();
            $ddlarea.append($("<option></option>").val("-1").html("-- Please select a --"));
        }
    });

    //If the area name is not populated and the city has selected data, the data is loaded
    if ($("select[id$=ddlAreaName] > option").length == 1 && $ddlcity.val() != "-1") {
        loadWater($ddlcity.val(), "SelectAreaName");
        //Read the cookie and set it to the selected state if there is a value
        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") {
            //The selected value stores the 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") {    //Binding city
        $("select[name$=ddlCity] > option").remove(); //Delete the original option
        $("select[id$=ddlCity]").append($("<option></option>").val("-1").html("-- Please select a --"));

        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 a --"));

        for (var i = 0; i < data.length; i++) {
            $("select[id$=ddlAreaName]").append($("<option></option>").val(data[i].AreaName).html(data[i].AreaName));
        }
    }
} 

Province data is bound when the page is loaded. After the page is submitted, the province value can be selected with selectvalue, and the city and area selected data can be obtained with Request["idname"]


Related articles: