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

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)

相关推荐

  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下,把代码简化一下. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 效果查看 源码下载 具体代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> &

  • js实现Select列表内容自动滚动效果代码

    js实现Select列表内容自动滚动效果代码

    本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g

  • js实现无限级树形导航列表效果代码

    js实现无限级树形导航列表效果代码

    本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • js实现带有介绍的Select列表菜单实例

    js实现带有介绍的Select列表菜单实例

    本文实例讲述了js实现带有介绍的Select列表菜单.分享给大家供大家参考.具体如下: 带有介绍的Select列表菜单特效代码,并不是导航菜单,这是表单中常用的下拉列表菜单,里面定义的菜单名称和链接都可以自己修改,不同的是添加了一个说明功能,鼠标点击列表中内容的时候,会浮动出本条内容的介绍,另外文本框内的内容也会跟着改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-info-select-menu-codes/ 具体代码如下: <ht

  • js点击列表文字对应该行显示背景颜色的实现代码

    js点击列表文字对应该行显示背景颜色的实现代码

    本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法.分享给大家供大家参考.具体如下:  JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效.   运行效果图如下: <style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> windo

  • JS实现带鼠标效果的头像及文章列表代码

    JS实现带鼠标效果的头像及文章列表代码

    本文实例讲述了JS实现带鼠标效果的头像及文章列表代码.分享给大家供大家参考.具体如下: 这是一种带图片功能的文章或新闻列表功能,鼠标滑过标题列表显示说明和图片,多见于SNS交友网站,不过你喜欢的话,你完全可以用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-style-face-article-list-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • JS+DIV+CSS实现仿表单下拉列表效果

    JS+DIV+CSS实现仿表单下拉列表效果

    本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE

  • JS+CSS实现Li列表隔行换色效果的方法

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • JS实现支持多选的遍历下拉列表代码

    JS实现支持多选的遍历下拉列表代码

    本文实例讲述了JS实现支持多选的遍历下拉列表.分享给大家供大家参考.具体如下: 这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,再次点击上边的列表任意值,可进行多选,多选功能得益于JavaScript的帮忙,在网页上这种应用挺广泛,有必要看一看. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-option-cha-codes/ 具体代码如下: <!

随机推荐