原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

JS左边列表转移右边

PHP中文网 • • 编程技术 • 阅读 2

这次给大家带来JS左边列表转移右边，JS左边列表转移右边的注意事项有哪些，下面就是实战案例，一起来看一下。

实现功能：

1.左边的下拉框内容添加到右边的下拉框，支持多选移动，且同时将右边的下拉框对象移除；

2.支持列表中项目上下位置的移动；

3.效果图如下：

JS左边列表转移右边

Html代码

  选择下拉菜单     
选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
  
 
   北京 上海 山东 安徽 重庆 福建 甘肃 广东 广西 贵州 海南 河北 黑龙江    
 
  		       
  		 
 
 值：   <!-- function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); ii=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } } else if(index==1){ if (obj.selectedIndex

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

前端如何向后台传送Json数据

如何让数据里html字段转换为HTML标签

Koa2做出文件上传下载功能

以上就是JS左边列表转移右边的详细内容，更多请关注【创想鸟】其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2765153.html

赞 (0)
0 0

关于作者

PHP中文网的头像

PHP中文网签约作者

436.1K 文章
0 评论
1 粉丝
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
上一篇 2025年3月8日 10:47:16
下一篇 2025年2月25日 14:11:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js中el表达式使用步奏详解

    这次给大家带来js中el表达式使用步奏详解，js中el表达式使用的注意事项有哪些，下面就是实战案例，一起来看一下。 场景： 页面跳转后，使用spring mvc向前端页面传过来一个json对象，要在js中获取后，做处理。 返回的json对象…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    000

  • JS中EL表达式获取相关元素参数

    这次给大家带来JS中EL表达式获取相关元素参数，JS中EL表达式获取相关元素参数的注意事项有哪些，下面就是实战案例，一起来看一下。 1. action返回参数到页面 /** * 测试js中获取后台传值 * @param model * @p…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • js获取ModelAndView后如何使用

    这次给大家带来js获取ModelAndView后如何使用，js获取ModelAndView使用的注意事项有哪些，下面就是实战案例，一起来看一下。 1 方法一 【有效】 可以的，跟el表达式访问方式一样。 示例代码，一个数据展示请求的Acti…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • jQuery读取json数据并排序

    这次给大家带来jQuery读取json数据并排序，jQuery读取json数据并排序的注意事项有哪些，下面就是实战案例，一起来看一下。 $.ajax({ url: ‘data.json’,//获取本地json数据，在同文件夹下 type: …

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • Angularjs让控制器之间相互通信（附代码）

    这次给大家带来Angularjs让控制器之间相互通信（附代码），Angularjs让控制器之间相互通信的注意事项有哪些，下面就是实战案例，一起来看一下。 利用angularjs开发项目中，控制器之间的通信，比如参数的传递，数据的传递，都是比…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200
  • nodejs自定义命令行工具 编程技术

    nodejs自定义命令行工具

    这次给大家带来nodejs自定义命令行工具，nodejs自定义命令行工具的注意事项有哪些，下面就是实战案例，一起来看一下。 一、实现一个简单的功能 二、环境 1.系统: window 10 2.注意事项: vscode3.node版本: 8…

    PHP中文网的头像 PHP中文网
    2025年3月8日
    200

  • js构建二叉树数组去重与优化步骤详解

    这次给大家带来js构建二叉树数组去重与优化步骤详解，js构建二叉树数组去重与优化的注意事项有哪些，下面就是实战案例，一起来看一下。 前言 本文主要介绍了关于js构建二叉树进行数值数组的去重与优化的相关内容，分享出来供大家参考学习，下面话不多…

    PHP中文网的头像 PHP中文网
    编程技术 2025年3月8日
    200

  • JS怎样操作红黑树

    这次给大家带来JS怎样操作红黑树，JS操作红黑树的注意事项有哪些，下面就是实战案例，一起来看一下。 红黑树的性质 一棵满足以下性质的二叉搜索树是一棵红黑树 每个结点或是黑色或是红色。 根结点是黑色的。 每个叶结点(NIL)是黑色的。 如果一…

    PHP中文网的头像 PHP中文网
    2025年3月8日 • 编程技术
    200

  • js实现滑动拼图验证效果（附代码）

    这次给大家带来js实现滑动拼图验证效果（附代码），js实现滑动拼图验证效果的注意事项有哪些，下面就是实战案例，一起来看一下。   上图为网易云盾的滑动拼图验证码，其应该有一个专门的图片库，裁剪的位置是固定的。我的想法是，随机生成图片，随机生…

    PHP中文网的头像 PHP中文网
    2025年3月8日 • 编程技术
    200
  • JS实现鼠标触发悬浮层效果 编程技术

    JS实现鼠标触发悬浮层效果

    这次给大家带来JS实现鼠标触发悬浮层效果，JS实现鼠标触发悬浮层效果的注意事项有哪些，下面就是实战案例，一起来看一下。 在人人，CSDN等一些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。 比如说CSDN的通知（应该…

    PHP中文网的头像 PHP中文网
    2025年3月8日
    200

发表回复

登录后才能评论

请登录

您还未登录，请登录后再进行相关操作！

登录 注册