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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
小程序实现搜索框
Jun 19 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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缓存技术介绍
2006/11/25 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Javascript var变量删除原理及实现
2020/08/26 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python文件操作基础流程解析
2020/03/19 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
中软国际Java程序员笔试题
2014/07/19 面试题
人力资源部门的主要职能
2014/02/22 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS