一个可以无限级联的下拉框 跨浏览器
前阵子要写javaScript，想想接触js这么久，从来没有好好用面向对象的方式写一个出来，于是就按照我的想法，实现了这个无限级联下拉框，不知道对js面向对象理解的对不对，呵呵。。贴上来分享一下
/**
* 作者：zhengxu 转载请注明作者
*mail:zhengxu238@163.com
*版本 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;
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["code"];
option.innerHTML = json["title"];
this.appendChild(option);
}
} ,
onchange:function() {
// alert(132);
// debugger;
if (this.linkedEl) {
var linkEl = $("#" + this.linkedEl);
var linkDom = linkEl;
var result = this.getData();
var linkDom = linkEl;
linkDom.initailizeItemFace(result);
linkEl.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
})
});
页:
[1]