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 选择器 xpath 语法应用
May 13 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
iframe实用操作锦集
Apr 22 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
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
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP实现微信提现功能
2018/09/30 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python赋值操作方法分享
2013/03/23 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
C语言笔试题回忆
2015/04/02 面试题
战友聚会邀请函
2014/01/18 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python