js中前台数据左右切换移动
来源:互联网 发布:国密sm2算法 编辑:程序博客网 时间:2024/06/02 02:25
左右移动或者上下移动都一样,核心思想就是左边对象获取右边的id
<script type="text/javascript">
// 先注册整个文件加载完成之后的事件
window.onload =function() {
//通过id属性值获取add标签对象
varaddButton = document.getElementById("add");
// 动态给这个addButton添加单击事件
addButton.onclick =function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
varfirstSelect = document.getElementById("first");
// 测试下拉列表中的options的长度
//alert(firstSelect.options.length);
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
varsecondSelect = document.getElementById("second");
//把左边下拉列表中选中的option添加到右边的select下拉列表中
// selectObj.selectedIndex是下拉列表中被选中的索引
secondSelect.appendChild( firstSelect.options[firstSelect.selectedIndex] );
}
// 通过ID属性值获取全部移到右边的按钮对象
varadd_allButton = document.getElementById("add_all");
// 动态给这个add_allButton添加单击事件
add_allButton.onclick =function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
varfirstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
varsecondSelect = document.getElementById("second");
// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
for(var i = 0; i < firstSelect.options.length;) {
secondSelect.appendChild( firstSelect.options[i] );
}
}
//
varremoveButton = document.getElementById("remove");
removeButton.onclick =function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
varfirstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
varsecondSelect = document.getElementById("second");
//把左边下拉列表中选中的option添加到右边的select下拉列表中
// selectObj.selectedIndex是下拉列表中被选中的索引
firstSelect.appendChild( secondSelect.options[secondSelect.selectedIndex] );
}
varremove_allButton = document.getElementById("remove_all");
remove_allButton.onclick =function() {
// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
varfirstSelect = document.getElementById("first");
// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
varsecondSelect = document.getElementById("second");
// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
for(var i = 0; i < secondSelect.options.length;) {
firstSelect.appendChild( secondSelect.options[i] );
}
}
}
</script>
- js中前台数据左右切换移动
- js图片库(无缝循环切换,左右移动效果)
- js图片库(无缝循环切换,左右移动效果)
- js左右控制切换
- UI左右切换数据
- js 实现左右移动
- 【js】左右上下移动
- js左右箭头图片切换
- js左右切换 选择年龄
- js实现左右切换页面
- 手机端左右滑动,不用写js(只有页面切换到移动端可以看)
- js控制多选框左右移动
- js控制多选框左右移动
- 左右列表选择数据移动
- JS 网页中通过js控制图片的左右上下移动
- js中关于导航切换效果-之一(鼠标移动)
- app放大缩小,同时左右切换页面。插件pinchzoom.js在iscroll和swipper中使用
- JavaScript js 左右移动下拉列表选项
- 404
- Nodejs基于mongoose模块的用法
- OSI七层模型
- Oracle——用户、角色和权限信息的视图总结
- 【Struts2】Action接收参数的三种方式
- js中前台数据左右切换移动
- 为什么在函数的声明后面还有一个 const? 如:void fun() const;
- select2的搜索框不能输入搜索内容
- 带你全方位学习Picasso(一)
- 【Leetcode】448. Find All Numbers Disappeared in an Array
- canvas下雪
- python openpyxl练习--打印九九乘法表到excel中。
- [Leetcode 283]Move Zeroes
- 数据库操作三方库ormlite,greenDao,litepal