Heim > Web-Frontend > js-Tutorial > Hauptteil

jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态_jquery

WBOY
Freigeben: 2016-05-16 17:18:27
Original
1021 Leute haben es durchsucht

功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态

把以下代码放在一个单独的js文件中,在页面上引用即可调用

复制代码 代码如下:

//获取cookie值
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;
}

//保存cookie值
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;
    }
}

//省市区,流域,水系,断面条件选择
$(function() {

    var $ddlprovince = $("#ddlProvince");     //省份
    var $ddlcity = $("#ddlCity");      //城市
    var $ddlarea = $("#ddlAreaName");         //区域


    //根据省份查询城市
    //$ddlprovince.focus(); //不要加focus,否则设置selected有问题
    $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[id$=ddlAreaName] > option").remove();
        $ddlarea.append($("").val("-1").html("--请选择--"));
    });


    //如果城市没有填充数据,省份有选择数据则加载数据
    if ($("select[id$=ddlCity] > option").length == 1 && $ddlprovince.val() != "-1") {


        loadWater($ddlprovince.val(), "SelectCity");
        //读cookie,有值则设为选中状态
        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");
        }
    }

    //根据城市查询区域
    //$ddlcity.focus();
    $ddlcity.bind("change keyup", function() {
        if ($(this).val() != "-1") {
            loadWater($(this).val(), "SelectAreaName");
            //选中值存cookie
            writeCookie("JQ_CityName", $(this).val(), 0.5, true);
        } else {
            $("select[name$=ddlAreaName] > option").remove();
            $ddlarea.append($("").val("-1").html("--请选择--"));
        }
    });


    //如果区名没有填充数据,城市有选择数据则加载数据
    if ($("select[id$=ddlAreaName] > option").length == 1 && $ddlcity.val() != "-1") {
        loadWater($ddlcity.val(), "SelectAreaName");
        //读cookie,有值则设为选中状态
        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") {
            //选中值存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") {    //绑定城市

        $("select[name$=ddlCity] > option").remove(); //删除原有的option
        $("select[id$=ddlCity]").append($("").val("-1").html("--请选择--"));


        for (var i = 0; i             $("select[id$=ddlCity]").append($("").val(data[i].City).html(data[i].City));
        }
    }
    else if (typename == "SelectAreaName") {

        $("select[name$=ddlAreaName] > option").remove(); //删除原有的option
        $("select[id$=ddlAreaName]").append($("").val("-1").html("--请选择--"));


        for (var i = 0; i             $("select[id$=ddlAreaName]").append($("").val(data[i].AreaName).html(data[i].AreaName));
        }
    }
}


说明:省份数据在页面加载时绑定,页面提交后 省份值可以用 selectvalue取,市,区选中数据要用 Request["idname"] 获取
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage