js操作列表左右移动,代码如下:

分类列表左移右移操作

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

选项9

//

document.getElementById("add").onclick = function(){

/*

*

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

*/

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

//for(var i=0;i

//var optionElement = optionElements[i];

//

//if(optionElement.getAttribute("selected")){

//secondElement.appendChild(optionElement);

//}

//}

for(var i=0;i

/*

* selectedIndex属性

* * 如果没有被选中的时候,selectedIndex的值是"-1"

* * 如果有一个呗选中的时候,selectedIndex的值就是那个被选中的选项的索引值

* * 如果有多个被选中的时候,selectedIndex的值只能找到第一个被选中的索引值

*/

//alert(firstElement.selectedIndex);

if(firstElement.selectedIndex!=-1){

secondElement.appendChild(optionElements[firstElement.selectedIndex]);

}

}

}

//

document.getElementById("add_all").onclick = function(){

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

for(var i=0;i

secondElement.appendChild(optionElements[0]);

}

}

//

document.getElementById("remove").onclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

if(secondElement.selectedIndex!=-1){

firstElement.appendChild(optionElements[secondElement.selectedIndex]);

}

}

}

//

document.getElementById("remove_all").onclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

firstElement.appendChild(optionElements[0]);

}

}

//双击 从左到右

/*

*

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

*/

document.getElementById("first").ondblclick = function(){

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

for(var i=0;i

if(firstElement.selectedIndex!=-1){

secondElement.appendChild(optionElements[firstElement.selectedIndex]);

}

}

}

document.getElementById("second").ondblclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

if(secondElement.selectedIndex!=-1){

firstElement.appendChild(optionElements[secondElement.selectedIndex]);

}

}

}

HTML5如何将列表向左右移,分类列表左移右移操作相关推荐

  1. 原码反码补码以及左移右移无符号左移右移。

    一. 机器数和真值 在学习原码, 反码和补码之前, 需要先了解机器数和真值的概念. 1.机器数 一个数在计算机中的二进制表示形式, 叫做这个数的机器数.机器数是带符号的,在计算机用一个数的最高位存放符 ...

  2. React Native 加载多类型布局的实现——分类列表SectionList的封装

    目标:简化及规范SectionList的使用. 实现:基于SectionList的封装. 适用的情况       普通的线布局+列表/分类列表+普通线程布局+列表/分类列表.如下图: 如上图中1.2. ...

  3. Day206.课程分类【导入功能】前端实现、 课程分类列表【显示功能】、课程管理【模块需求、添加课程功能】 -谷粒学院

    谷粒学院 [课程分类]-导入前端实现 一.配置路由 1.添加路由 src/router/index.js //课程分类{path: 'subject',component: Layout,redire ...

  4. SAP Retail Assortment List - 分类列表

    The assortment list provides an overview of the listed assortment.   分类列表为已经列出的分类提供一个总体概览. By using ...

  5. zblog php版调用代码,zblog PHP分类列表调用方法

    在做zblog网站的时候常常需要调用分类列表展示在网站的首页或者文章页. 下面给大家分享一个简单的调用代码: {foreach GetList(列表文章数,分类id) as $article} {te ...

  6. JeePlus左树右表之 表单【右表】自动获取列表【左树 】中的id

    JeePlus 左树右表中表单[右表]自动获取列表[左树 ]中的id 左树右表中表单[右表]和列表[左树 ]中有个关联.新建[右表]的时候每次都需要手动选择[左树 ]中的数据.并进行绑定. 方法: 1 ...

  7. WordPress分类列表函数:wp_list_categories用法及参数详解举例

    http://www.511yj.com/wordpress-wp-categories.html 注意: 1. wp_list_categories() 和 list_cats() 以及 wp_li ...

  8. Windows Phone 7 LongListSelector控件实现分类列表和字母索引

    在wp7手机里面的联系人列表和程序里面里面我们可以看到一个根据字母索引来定位联系人或者应用程序的控件,那么这个控件就是LongListSelector控件了. LongListSelector是一种比 ...

  9. 在MVC3中怎么实现分类列表?

    问下,在MVC3中怎么实现分类列表啊. 有一个分类: ID, Name, ParentID 1 分类一 0 2 分类二 0 3 分类三 1 4 分类四 1 需要实现功能: <ul>    ...

最新文章

  1. 【PHP】php生成一个不重复的数字(订单号、会员号)
  2. Android RuntimePermissions运行时权限:单个运行时权限申请简例
  3. 苏炳添:发C刊与拿冠军相比,哪个更难?
  4. php form表单属性,HTML5 表单属性
  5. Android打包使用自有证书认证
  6. IP地址的分类及子网划分
  7. mysql ssh 导入时注意问题
  8. 局域网助手_IP地址管理和局域网远程助手
  9. 国家代号(CountryCode) - 常用国家地区代码和国际电话代码
  10. 企业超过三个月不支付竞业补偿,劳动者去同业公司上班会被告赔偿吗?
  11. 调用新浪微博开放平台接口
  12. 计算机专业初学者推荐书籍
  13. elasticsearch-8.0.0报错总结(ES)-持续更新
  14. win10 资源管理器无限闪退
  15. 停车场车牌识别收费系统厂家
  16. node.js常用模块
  17. python字典操作 EasyDict()作用
  18. 衡水中学2021年的高考成绩查询,2021年全国百强高中排名,它拥有90%一本升学率,超衡水中学成第一...
  19. jumpserver详解(六)——jumpserver luna组件安装
  20. 超nei卷!连黑客勒索软件团伙都开始谈客户体验…

热门文章

  1. 从零实现加密隧道(一):socket编程记录
  2. 无损音频wav音乐格式怎么转换成mp3格式 1
  3. 微信公众号常用加粉方法全解析
  4. opencv关于图像深度转换的一点理解
  5. 科研工具--HistCite
  6. 微信为啥这么省流量(技术宅入)
  7. 为金融服务注入新动能——5G消息助力银行场景化升级
  8. 【sql】184. 部门工资最高的员工
  9. Spring Boot 集成 XXL-JOB
  10. ffmpeg转码多路输出(二)