刚接触js的OO编程,做了一个js无限级下拉,感觉还是像过程化编程,还有内存泄漏问题,请指点 学习....用jQuery 可以很方便------------------------------------------酷得组件仓库 - 第三方软件开发组件下载\试用www.cookcode.net 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 不好意思,发错了:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script>/** * @description js与DOM结合的无限级下拉 * @Copy-Right: All Free * @author [email protected] * @version beta 1 * 全国省市两级数据在IE6中测试内存消耗不断增长,火狐下不会 * 有优化方式麻烦联系作者,谢谢 */function infinity(){ this.selectWidth = '100px'; //下拉表的宽度 this.selectSize = 0; //下拉表显示的行数 //初始化 this.init = function( objDiv, objTarget, id){ this.objDiv = objDiv; //要挂载SELECT元素的对象 this.objTarget = objTarget; //分类数组,格式为: target[id] = [parent_id, 'cate_name']; 顶级分类的parent_id为0 this.recursion( id); //向上递归,选中默认的值 this.next( id); //如果还有子类 } this.recursion = function ( id){ var select = this.mkselect(); //创建一个SELECT元素 select.options.add( this.mkoption()); //附加一个'请选择'下拉 //如果是上一级,则要附加在最前边,与next想反 this.objDiv.lastChild ? this.objDiv.insertBefore(select, this.objDiv.firstChild) : this.objDiv.appendChild( select); for(var i in this.objTarget){ //如果没有默认值则选中顶级分类 if( (id&&this.objTarget[i][0] == this.objTarget[id][0])||(!id&&this.objTarget[i][0]==0)){ var option = this.mkoption(i, this.objTarget[i][1]) select.options.add( option); option.selected = (i==id) ? 'selected' : ''; } } //如果上级分类不为0,向上递归 if( id && this.objTarget[id][0] !=0 ){ this.recursion( this.objTarget[id][0]) } } this.mkselect = function (){ var objThis = this; var obj = document.createElement('select'); obj.size = this.selectSize; obj.style.width = this.selectWidth; //CHANGE事件,改变下拉表,则清除子分类下拉,闭包?内存泄漏? function change(){ while( obj.nextSibling) { typeof(obj.nextSibling.detachEvent)!='undefined' ? obj.nextSibling.detachEvent('onchange', change) : obj.nextSibling.removeEventListener('change', change, false); obj.nextSibling.parentNode.removeChild( obj.nextSibling); } objThis.next( obj.value); } typeof(obj.attachEvent)!='undefined' ? obj.attachEvent("onchange", change) : obj.addEventListener('change', change, false); return obj; } this.mkoption = function (value, text) { var obj = document.createElement('option'); obj.text = text ? text : '--请选择--'; obj.value = value ? value : ''; return obj; } this.next = function ( id){ if( ! this.objTarget[id]) return; //查找是否有子类 var select; for( var i in this.objTarget){ if ( this.objTarget[i][0] == id) { if( ! select ) { select = this.mkselect(); select.options.add( this.mkoption()); } select.options.add( this.mkoption(i, this.objTarget[i][1])); } } select ? this.objDiv.appendChild( select) : ''; } this.getvalue = function (){ var obj = this.objDiv.lastChild; while( obj && !obj.value ){ obj = obj.previousSibling; } if( ! obj){ alert('请选择一项!'); }else{ alert( obj.value); } }}</script><script>var wuji1 = new Array();wuji1[1] = [0, '1级'];wuji1[2] = [1, '2级'];wuji1[3] = [2, '3级'];wuji1[4] = [3, '4级'];var wuji2 = new Array();wuji2[1] = [0, '1级'];wuji2[2] = [1, '2级'];wuji2[3] = [2, '3级'];wuji2[4] = [3, '4级'];window.onload = function (){ inf1 = new infinity(); inf1.init( document.getElementById('wuji1'), wuji1); inf2 = new infinity(); //初始化:要挂载的点,数据源,初始数值 inf2.init( document.getElementById('wuji2'), wuji2, 4);}</script><div id='wuji1'></div><input type='button' onclick='inf1.getvalue()' value='查看第一个' /><p><div id='wuji2'></div><input type='button' onclick='inf2.getvalue()' value='查看第二个' /> 拙见……:看起来思路不是很清晰.比如 //查找是否有子类 这个过程可单独放出来作为一个方法~http://blog.csdn.net/SysTem128[JavaScript]计数器(倒数)jQuery实现【幻灯片】jQuery实现的文本域Redo和Undo apache下的伪静态如何转换成iis下的伪静态 ubuntu中,使用PHP中unlink无法删除文件 请问怎么在header跳转之前,刷新父窗口? php写的下载代码,为什么文件总是下载不完整。 ■■现在公司开发PHP最流量的服务器配置和开发工具是什么? PHP $_SERVER['argv' ] 出现notice 杭州找美工做个网站,留下联系方式 这是怎么回事?装了php 4.3.0后所有form的post都用不了了!!! 新手求教。。。 php字符串转换json问题 求一个模板的实现.具体进来看一下,谢谢 如何获取一个ip地址的HTTP状态码?
/**
* @description js与DOM结合的无限级下拉
* @Copy-Right: All Free
* @author [email protected]
* @version beta 1
* 全国省市两级数据在IE6中测试内存消耗不断增长,火狐下不会
* 有优化方式麻烦联系作者,谢谢
*/
function infinity(){
this.selectWidth = '100px'; //下拉表的宽度
this.selectSize = 0; //下拉表显示的行数 //初始化
this.init = function( objDiv, objTarget, id){
this.objDiv = objDiv; //要挂载SELECT元素的对象
this.objTarget = objTarget; //分类数组,格式为: target[id] = [parent_id, 'cate_name']; 顶级分类的parent_id为0
this.recursion( id); //向上递归,选中默认的值
this.next( id); //如果还有子类
}
this.recursion = function ( id){
var select = this.mkselect(); //创建一个SELECT元素
select.options.add( this.mkoption()); //附加一个'请选择'下拉 //如果是上一级,则要附加在最前边,与next想反
this.objDiv.lastChild ? this.objDiv.insertBefore(select, this.objDiv.firstChild) : this.objDiv.appendChild( select);
for(var i in this.objTarget){
//如果没有默认值则选中顶级分类
if( (id&&this.objTarget[i][0] == this.objTarget[id][0])||(!id&&this.objTarget[i][0]==0)){
var option = this.mkoption(i, this.objTarget[i][1])
select.options.add( option);
option.selected = (i==id) ? 'selected' : '';
}
}
//如果上级分类不为0,向上递归
if( id && this.objTarget[id][0] !=0 ){
this.recursion( this.objTarget[id][0])
}
} this.mkselect = function (){
var objThis = this;
var obj = document.createElement('select');
obj.size = this.selectSize;
obj.style.width = this.selectWidth; //CHANGE事件,改变下拉表,则清除子分类下拉,闭包?内存泄漏?
function change(){
while( obj.nextSibling)
{
typeof(obj.nextSibling.detachEvent)!='undefined' ? obj.nextSibling.detachEvent('onchange', change) : obj.nextSibling.removeEventListener('change', change, false);
obj.nextSibling.parentNode.removeChild( obj.nextSibling);
}
objThis.next( obj.value);
} typeof(obj.attachEvent)!='undefined' ? obj.attachEvent("onchange", change) : obj.addEventListener('change', change, false);
return obj;
} this.mkoption = function (value, text)
{
var obj = document.createElement('option');
obj.text = text ? text : '--请选择--';
obj.value = value ? value : '';
return obj;
} this.next = function ( id){
if( ! this.objTarget[id]) return; //查找是否有子类
var select;
for( var i in this.objTarget){
if ( this.objTarget[i][0] == id)
{
if( ! select )
{
select = this.mkselect();
select.options.add( this.mkoption());
}
select.options.add( this.mkoption(i, this.objTarget[i][1]));
}
}
select ? this.objDiv.appendChild( select) : '';
} this.getvalue = function (){
var obj = this.objDiv.lastChild;
while( obj && !obj.value ){
obj = obj.previousSibling;
}
if( ! obj){
alert('请选择一项!');
}else{
alert( obj.value);
}
}
}
</script><script>
var wuji1 = new Array();
wuji1[1] = [0, '1级'];
wuji1[2] = [1, '2级'];
wuji1[3] = [2, '3级'];
wuji1[4] = [3, '4级'];var wuji2 = new Array();
wuji2[1] = [0, '1级'];
wuji2[2] = [1, '2级'];
wuji2[3] = [2, '3级'];
wuji2[4] = [3, '4级'];window.onload = function (){
inf1 = new infinity();
inf1.init( document.getElementById('wuji1'), wuji1); inf2 = new infinity();
//初始化:要挂载的点,数据源,初始数值
inf2.init( document.getElementById('wuji2'), wuji2, 4);}</script>
<div id='wuji1'></div><input type='button' onclick='inf1.getvalue()' value='查看第一个' />
<p>
<div id='wuji2'></div><input type='button' onclick='inf2.getvalue()' value='查看第二个' />
看起来思路不是很清晰.
比如 //查找是否有子类 这个过程可单独放出来作为一个方法~http://blog.csdn.net/SysTem128
[JavaScript]计数器(倒数)
jQuery实现【幻灯片】
jQuery实现的文本域Redo和Undo