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和svg实现超炫酷的动画特效
Dec 09 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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 图像处理类1
2009/06/15 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Django自定义用户认证示例详解
2018/03/14 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
SQL面试题
2013/04/30 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
竞聘演讲稿
2014/04/24 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年共青团工作总结
2015/05/15 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
创业计划书之农家乐
2019/10/09 职场文书
python绘制箱型图
2021/04/27 Python