您好,欢迎访问一九零五行业门户网

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

功能:省,市,地区三级联动,采用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] 获取
其它类似信息

推荐信息