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


Posted in Javascript onOctober 29, 2013

功能:省,市,地区三级联动,采用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($("<option></option>").val("-1").html("--请选择--"));
        }
        //从新选择省份或者从新选择城市都会初始化区域
        $("select[id$=ddlAreaName] > option").remove();
        $ddlarea.append($("<option></option>").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($("<option></option>").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($("<option></option>").val("-1").html("--请选择--"));

        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(); //删除原有的option
        $("select[id$=ddlAreaName]").append($("<option></option>").val("-1").html("--请选择--"));

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

说明:省份数据在页面加载时绑定,页面提交后 省份值可以用 selectvalue取,市,区选中数据要用 Request["idname"] 获取
Javascript 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
JS 页面计时器示例代码
Oct 28 #Javascript
js如何判断不同系统的浏览器类型
Oct 28 #Javascript
使用js的replace()方法查找字符示例代码
Oct 28 #Javascript
js中的replace方法使用介绍
Oct 28 #Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 #Javascript
javascript抖动元素的小例子
Oct 28 #Javascript
replace()方法查找字符使用示例
Oct 28 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Git命令之分支详解
2021/03/02 PHP
文字幻灯片
2006/06/26 Javascript
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python画微信表情符的实例代码
2019/10/09 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
大学生两会精神学习心得体会
2014/03/10 职场文书
小学生评语集锦
2014/04/18 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python