码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现select多级联动

时间:2015-08-19 08:14:09      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

之前在angular的时候实现多级联动很方便,只需监听某个变量的变化然后执行函数就行,昨天自己写了个联动:

var getOptions = function(param, domId){
        $.ajax({
            url:"/admin/ucm/queryResource?areaCode="+param,
            type:get,
            success:function(res){
                var data = res.bizData.lists;

                $("#"+domId + " option:gt(1)").remove();
                //删除原有的1-n个option,防止不断追加
                for(var i = 0,len = data.length;i < len;i++){
                    (function(i){
                        if(!i){
                            $("#"+domId).append("<option value=\‘" + data[i].code + "\‘ selected>" + data[i].name + "</option>");
                        }
                        else{
                            $("#"+domId).append("<option value=\‘" + data[i].code + "\‘>" + data[i].name + "</option>");
                        }
                        console.log(data[i]);
                    })(i)
                    //这里有闭包,小心绕行
                }
                $("#"+domId).trigger("change");
                //触发联动事件
            },
            error : function(){
                console.log("error",res);
            }
        })
    };



    $("#provence").change(function(){
        getOptions($("#provence").val(), "city")
    });
    $("#city").change(function(){
        getOptions($("#city").val(), "country")
    });
    $("#country").change(function(){
        getOptions($("#country").val(), "area")
    });
    getOptions("0","provence");
    //触发联动事件
  

 

jquery实现select多级联动

标签:

原文地址:http://www.cnblogs.com/xianZJ/p/4741175.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!