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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
巧用canvas
Jan 21 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
我的论坛源代码(六)
2006/10/09 PHP
很好用的PHP数据库类
2009/05/27 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python通过实例讲解反射机制
2019/10/17 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
异常和异常类的概念
2014/09/12 面试题
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
高级编程求职信模板
2014/02/16 职场文书
商务英语专业求职信
2014/06/26 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
教师党员承诺书2015
2015/01/21 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
关于五一放假的通知
2015/08/18 职场文书
公司董事任命书
2015/09/21 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL