发布于 2017-06-29 11:48:22 | 126 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


本节为大家介绍的是用JS实现列表与多选框选择,并附gif演示动画,这个例子很详细,大家可以看看

1功能预览

2html代码


<span> 
<tr> 
<td><img onclick="addType()" src="${msUrl}/images/logo/add.png">产品范围:</td> 
<td><select id="selectTypeOne" class="easyui-combobox" data-options="required:true"> 
<option>一级分类</option> 
</select> <select id="selectTypeTwo" class="easyui-combobox" data-options="required:true"> 
<option selected="selected">全部</option> 
</select></td> 
</tr> 
<tr height="20px"> 
<td></td> 
<td id="typeThree"></td> 
</tr> 
<tr height="30px"> 
<td></td> 
<td><span id="typeOneResult"></span><span id="typeOneSubResult"></span> 
<hr /></td> 
</tr> 
</span>

 3js代码


$('#selectTypeOne').combobox({ 
url : config.urlMap.typeList, 
valueField : 'name', 
textField : 'name', 
required : true, 
width : '100', 
onSelect : function(row) { 
typeName1 = row.name 
$('#typeThree').html(""); 
$('#typeOneResult').html(""); 
$('#typeOneSubResult').html(""); 
subTypeName=[]; 
$('#selectTypeTwo').combobox({ 
url : config.urlMap.typeList + "?parent=" + row.id, 
valueField : 'name', 
textField : 'name', 
width : '100', 
required : true, 
onSelect : function(row) { 
typeName2 = typeName1 + ">" + row.name; 
$.getJSON(config.urlMap.typeList + "?parent=" + row.id, function(data) { 
var typeThreeName = "" 
for (var i = 0; i < data.length; i++) { 
typeThreeName += "<input onclick=clinkType(\"" + data[i].name + "\") name='typeThree' value=" + data[i].name + " type='checkbox'>" + data[i].name 
} 
$('#typeThree').html(typeThreeName); 
$('#typeOneResult').html(typeName2 + ">"); 
$('#typeOneSubResult').html(""); 
subTypeName=[]; 
}); 
} 
}) 

} 
}); 
}) 
//删除下标元素方式一 
Array.prototype.remove = function(dx) { 
if (isNaN(dx) || dx > this.length) { 
return false; 
} 
for (var i = 0, n = 0; i < this.length; i++) { 
if (this[i] != this[dx]) { 
this[n++] = this[i] 
} 
} 
this.length -= 1 
} 
//删除数组元素方式二 
Array.prototype.baoremove = function(dx) { 
if (isNaN(dx) || dx > this.length) { 
return false; 
} 
this.splice(dx, 1); 
} 
var subTypeName = []; 
function clinkType(name) { 
var index = subTypeName.indexOf(name) 
if (index == -1) { 
subTypeName.push(name); 
} else { 
subTypeName.baoremove(index); 
} 
$('#typeOneSubResult').html(subTypeName.join(",")); 
}


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务