JavaScript js 左右移动下拉列表选项

最新推荐文章于 2024-05-06 18:26:11 发布
最新推荐文章于 2024-05-06 18:26:11 发布
阅读量569 收藏
点赞数 1
分类专栏： Javascript 文章标签： javascript
  1. 最开始想每个方法中用一个循环搞定，后来发现循环删除后。options的索引和集合就发生了变化，删除就不成功。有时候还出现selected为空的现象，2个循环就over了；  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>addMulitOptions.html</title>  
  7.       
  8.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  9.     <meta http-equiv="description" content="this is my page">  
  10.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  11.     <script type="text/javascript">  
  12.         function moveLeft() {  
  13.             var lBox = document.getElementById("leftBox");  
  14.             var rBox = document.getElementById("rightBox");  
  15.             var count = 0;;  
  16.             for (var i = 0, len = lBox.length; i < len; i++) {  
  17.                 if (lBox[i].selected) {  
  18.                     rBox.options.add(new Option(lBox.options[i].text, lBox[i].value));  
  19.                     count++;  
  20.                 }  
  21.             }  
  22.             for (var i = 0; i < count; i++) {  
  23.                 lBox.remove(lBox.selectedIndex);  
  24.             }  
  25.         }  
  26.           
  27.         function moveRight() {  
  28.             var lBox = document.getElementById("leftBox");  
  29.             var rBox = document.getElementById("rightBox");  
  30.             var count = 0;;  
  31.             for (var i = 0, len = rBox.length; i < len; i++) {  
  32.                 if (rBox[i].selected) {  
  33.                     lBox.options.add(new Option(rBox.options[i].text, rBox[i].value));  
  34.                     count++;  
  35.                 }  
  36.             }  
  37.             for (var i = 0; i < count; i++) {  
  38.                 rBox.remove(rBox.selectedIndex);  
  39.             }  
  40.         }  
  41.     </script>  
  42.   </head>  
  43.     
  44.   <body>  
  45.     <select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">  
  46.         <option value="1">a</option>  
  47.         <option value="2">b</option>  
  48.         <option value="3">c</option>  
  49.         <option value="4">d</option>  
  50.     </select>  
  51.     <input type="button" value="&gt;&gt;" οnclick="moveLeft()"/>  
  52.     <input type="button" value="&lt;&lt;" οnclick="moveRight()"/>  
  53.     <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">  
  54.         <option value="11">A</option>  
  55.         <option value="22">B</option>  
  56.         <option value="33">C</option>  
  57.         <option value="44">D</option>  
  58.     </select>  
  59.   </body>  
  60. </html>  
louis810523
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CarrieJS:适用于桌面和移动设备的完整 JavaScript 菜单系统
07-07
路线图： 选项 选择菜单 切换菜单 滑动菜单 下拉式菜单 大菜单 从 JSON 对象构建菜单移动的 触摸事件（电话） 基于图标的图形（字体） 滑开效果 下拉效果桌面 触摸事件（平板电脑） 悬停/单击下拉菜单 大（超级）...
javascript之选项左右移动
zhixinhuacom的专栏
12-10 1222
效果： 无标题文档                             选项1           选项2           选项3           选项4           选项5           选项6           选项7           选项8           
java左右选项移动_JavaScript js 左右移动下拉列表选项
weixin_39587822的博客
02-19 84
最开始想每个方法中用一个循环搞定，后来发现循环删除后。options的索引和集合就发生了变化，删除就不成功。有时候还出现selected为空的现象，2个循环就over了；addMulitOptions.htmlfunction moveLeft() {var lBox = document.getElementById("leftBox");var rBox = document.getEleme...
JavaScript 下拉列表左右选择 案例
刘伟佳的博客
04-18 1112
功能描述 网页设置两个复选框，分别置入一些选项。 下面分别置入两个按钮，点击左边的按钮可以把左边选中的选项移动至右边。右边同理。 如下图所示： 分析 HTML页面设计<select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;"> <option v...
JavaScript经典实例
06-05
　9.9根据其他表单选择修改一个选项列表 　第10章调试和错误处理 　10.0简介 　…… 　第11章访问页面元素 　第12章创建和删除元素和属性 　第13章使用Web页面空间 　第14章使用JavaScript、CSS和ARIA创建交互和可...
程序天下:JavaScript实例自学手册
07-08
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
LC-select:Superlight Vanilla javascript插件，用于现代Web下拉菜单。 支持多选项，搜索和图像。 专为无缝主题设计
05-04
LCweb的Superlight Vanilla JavaScript下拉列表是否需要摆脱jQuery（或任何其他）依赖关系？ 其他软件包太重了，无法仅调整选择字段？ LC Select的创建着重于这些方面：纯javascript（ES6）插件，仅20KB（加上4KB...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
bpmn-js推荐几款常用的插件
飞云先生
04-30 132
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 956
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1177
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
表格隔行变色
weixin_54339833的博客
05-02 390
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3引入element-plus完整步骤
最新发布
zzx262625的博客
05-06 167
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 586
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 310
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 845
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
前端 | iframe框架标签应用（二）| 外部页面导入
因为健忘，所以记点有的没的〒▽〒
05-06 959
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
js 下拉列表框动态数据
12-27
下面是使用JavaScript实现下拉列表框动态数据的方法： 1. 添加数据项到下拉列表框： ```javascript var select = document.getElementById("mySelect"); // 获取下拉列表框元素 var option = document.createElement("option"); // 创建一个option元素 option.text = "选项1"; // 设置option的文本内容 option.value = "value1"; // 设置option的值 select.add(option); // 将option添加到下拉列表框中 ``` 2. 删除下拉列表框中的数据项： ```javascript var select = document.getElementById("mySelect"); // 获取下拉列表框元素 select.remove(index); // 根据索引删除指定位置的option元素 ``` 3. 上下移动下拉列表框中的数据项： ```javascript var select = document.getElementById("mySelect"); // 获取下拉列表框元素 var selectedIndex = select.selectedIndex; // 获取当前选中的索引 if (selectedIndex > 0) { select.options[selectedIndex].swapNode(select.options[selectedIndex - 1]); // 将当前选中的option元素与前一个option元素交换位置 } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值