JS 实现列表与多选框选择附预览动画


Posted in Javascript onOctober 29, 2014

1功能预览
JS 实现列表与多选框选择附预览动画
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(",")); 
}
Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
国外的为初学者写的JavaScript教程
Jun 09 Javascript
javascript call和apply方法
Nov 24 Javascript
浅析javascript 定时器
Dec 23 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
微信小程序实现录音Record功能
May 09 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 #Javascript
js实现ArrayList功能附实例代码
Oct 29 #Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 #Javascript
js中的json对象详细介绍
Oct 29 #Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 #Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
JavaScript中的迭代器和生成器详解
Oct 29 #Javascript
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
ASP知识讲座四
2006/10/09 PHP
php类
2006/11/27 PHP
php 过滤危险html代码
2009/06/29 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
python之消除前缀重命名的方法
2018/10/21 Python
Django的Modelforms用法简介
2019/07/27 Python
深入了解Python 变量作用域
2020/07/24 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
ktv收银员岗位职责
2013/12/16 职场文书
有关打架的检讨书
2014/01/25 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
入党申请书怎么写?
2019/06/11 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Pygame Time时间控制的具体使用详解
2021/11/17 Python