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 相关文章推荐
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
js中常用的Math方法总结
Jan 12 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
vue项目中实现的微信分享功能示例
Jan 21 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 代码优化之经典示例
2011/03/24 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
js实现京东轮播图效果
2017/06/30 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python操作 hbase 数据的方法
2016/12/18 Python
scrapy爬虫实例分享
2017/12/28 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
工程现场管理求职自荐信
2013/10/02 职场文书
英语自我评价范文
2014/01/24 职场文书
党员一帮一活动总结
2014/07/08 职场文书
内科护士节演讲稿
2014/09/11 职场文书
员工试用期自我评价
2014/09/18 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL
Python中的socket网络模块介绍
2022/07/23 Python