一个可以无限级联的下拉框 跨浏览器

前阵子要写javaScript，想想接触js这么久，从来没有好好用面向对象的方式写一个出来，
于是就按照我的想法，实现了这个无限级联下拉框，不知道对js面向对象理解的对不对，呵呵。。贴上来分享一下
/**
*   作者：zhengxu         转载请注明作者
*  mail:[e-mail]
*  版本 0.9
* 时间：2011-3-20
* 描述：原生，可配置无限级下拉框的通用组件  ，包含丰富的事件处理机制
* 浏览器支持：支持ie6以上版本。google Chrome,
*     firefox装载数据的时候有小问题。下个版本再修复。
* MutiSelector类
* 可选参数列表
* el: 表单元素。可理解为containner。可为任意对象。MutiSelector对象初始化的时候将自动替换该对象
* lazyLoad: 是否惰性加载。   程序默认实现惰性加载。该属性暂时无用,可不配置
* width： Mutiselector宽度
* height: 高度
* enable：控件是否为禁用状态，一般级联下拉框的首个下拉框是不禁用的。 true|false
* tip: 下拉列表框的提示信息如：“请选则车辆品牌”
* linkedEl：该属性很重要，代表我们告诉控件，我的下级联动下拉框是谁
* dataLoadingUrl：ajax请求的数据路径
* *****************************************************以下为事件定义。可选配置。不影响正常使用***********************************************************
* **************************************只对第一层的下拉框起作用，后续的操作可以通过onchange前后的事件织入逻辑******************************************************************************
*    onBeforeLoading: 数据加载前事件
*   onLoadingEnd：数据加载结束事件
*   *********************************************************
*     onBeforeChange: 选项框值改变前事件
*     onAfterChange: 值改变后事件
*
*     
************************CSS样式自定义*************
* 可以通过this关键字如 this.style.fontSize=12px 的形式对该下拉框对象进行样式修改
* 如：
*
*
*
*/
var MutiSelector = function() {

    this.othis = arguments[0];
    this.el = this.othis.el;

    this.lazyLoad = this.othis.lazyLoad;
    this.width = this.othis.width;
    this.height = this.othis.height;

    this.onDraw();

    this.comp.enable = typeof this.othis.enable == 'undefined' ? false : this.othis.enable

    if (this.comp.enable)
    {
        if (this.comp.disabled)
        {
            this.comp.disabled = false;
        }
    } else {
        this.comp.disabled = "true";
    }
    this.comp.tip = this.othis.tip;
    this.comp.linkedEl = this.othis.linkedEl;
    this.comp.dataLoadingUrl = this.othis.dataLoadingUrl;
    this.comp.onBeforeLoading = this.othis.onBeforeLoading;
    this.comp.onLoadingEnd = this.othis.onLoadingEnd;


    this.comp.onBeforeChange=this.othis.onBeforeChange;
     this.comp.onAfterChange=this.othis.onAfterChange;
  
    this.comp.onchangeMethod=this.onchange;
  
    this.comp.onchange =function(){
                  if(this.onBeforeChange){this.onBeforeChange();}
                  this.onchangeMethod();
                 if(this.onAfterChange){this.onAfterChange();}
    }
    this.comp.getData = this.getData;
    this.comp.initailizeItemFace = this.initailizeItemFace;
    this.comp.data = null;             //该对象存放服务器返回的jason数据
    this.comp.load = this.load;

  
    this.comp.loadData=function(){
        if(this.onBeforeLoading) {this.onBeforeLoading();}
        this.load();
        if(this.onLoadingEnd) {this.onLoadingEnd();}
    }

    this.comp.loadData();
    this.comp.getComp = function() {
        return this;
    }
}
/**
* 定于MutiSelector的原型内的常量属性
* 原型内的所有属性和方法，在对象间可共享
*/
MutiSelector.prototype = {



    onDraw:function() {
        this.comp = document.createElement("select");
        this.comp.id = this.el;
        this.comp.name = this.el;
        this.comp.style.width = this.width;
        this.comp.style.height = this.height;

        $("#" + this.el).replaceWith(this.comp);
    } ,

    load:function() {

        if (this.dataLoadingUrl && this.enable) {
            var result = this.getData();
            this.initailizeItemFace(result);
        }

    }  ,
    getData:function() {
        var el = this;
//        alert(this.value + ":" + el.dataLoadingUrl);
        var obj = $.ajax({
            type: "POST",
            url:this.dataLoadingUrl,
            data: "id=" + this.value,
            async : false      ,
            success: function(msg) {

                el.data = msg;

            }
        });

        return el.data;
    },
    initailizeItemFace:function(result) {

        //        debugger;
        if (result == '' || result == null || typeof result == 'undefined')
        {
            var optionErr = document.createElement("option");
            optionErr.innerHTML = "没有数据返回";
            this.appendChild(optionErr);
            return false;
        }

        var json = eval(result);
        //        alert("json:"+json);
        this.innerHTML = "";
        var optionNull = document.createElement("option");
        optionNull.innerHTML = this.tip;
        this.appendChild(optionNull);
        for (var i = 0; i < json.length; i++) {
            var option = document.createElement("option");
            option.value = json[i]["code"];
            option.innerHTML = json[i]["title"];
            this.appendChild(option);
        }
    }   ,
    onchange:function() {
       
//                                 alert(132);
//        debugger;
        if (this.linkedEl) {

            var linkEl = $("#" + this.linkedEl);
            var linkDom = linkEl[0];
            var result = this.getData();
            var linkDom = linkEl[0];
            linkDom.initailizeItemFace(result);
            linkEl[0].disabled = false;
        }
        //        if( var paramValue=this.value;)

    }
}

/************结合jquery来使用，也可以单独使用****************/
$(document).ready(function() {


       var obj = new MutiSelector(
    {
        el:       "selector1"             ,
        linkedEl:  "selector2" ,
        tip:"请选则品牌" ,
        width: '500px'     ,
        height:'20px',
        dataLoadingUrl: "http://localhost:60/jq/testServlet.do",
        enable:true    ,
        onBeforeLoading:function(){
            alert("数据加载前事件") ;
        }  ,
        onLoadingEnd:function(){

            alert("获取的comp组件:"+this);
            alert("数据加载后事件 ");
        }  ,
        onBeforeChange:function(){

            alert("选择改变前事件")
        },
        onAfterChange:function(){
            alert("选择改变后")
        }


    })



    var obj1 = new MutiSelector(
    {
        el:       "selector2"             ,
        linkedEl:  "selector3" ,
        dataLoadingUrl: "http://localhost:60/jq/testServlet.do",
        tip:"请选则车系" ,
        width: '500px'     ,
        height:'20px' ,
        enable:false
    })


    var obj2 = new MutiSelector(
    {
        el:       "selector3"             ,
        tip:"请选则颜色" ,
        width: '500px'     ,
        height:'20px' ,
        enable:false
    })
});

评论

2 楼 icezx 2011-08-19  

wulei_wolf1985 写道

学习了!!!

不知道写的怎么样。。很少写js。我是菜禽水平呵呵

1 楼 wulei_wolf1985 2011-08-19  

学习了!!!