JS控制下拉列表左右选择实例代码


Posted in Javascript onMay 08, 2020

使用JS控制下拉列表左右选择

需求分析

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品

技术分析

ondblclick="selectOne()":双击事件

select标签的属性multiple="multiple":

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
//2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectOne()"> >> </a> <br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;"> 
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > << </a> <br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>

实例补充:

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript下拉列表左右选择</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" >
    function chooseToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;      //这里要特别注意!!!因为appendChild相当于剪切,所以每次循环之后要执行k--,i--
        }
      }
    }
    function chooseToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;
        }
      }
    }
    function allToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
    function allToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
  </script>
 </head>
 <body>
 <div style="float: left">
   <select id="s1" multiple="multiple" style="width: 120px;height: 150px">
     <option>AAAAAAA</option>
     <option>BBBBBBB</option>
     <option>CCCCCCC</option>
     <option>DDDDDDD</option>
     <option>EEEEEEE</option>
   </select><br><br>
   <input type="button" value="选中添加到右边" onclick="chooseToRight();"/><br><br>
   <input type="button" value="全部添加到右边" onclick="allToRight();"/><br>
 </div>
 <div style="float: left">
   <select id="s2" multiple="multiple" style="width: 120px;height: 150px">
     <option>1111111</option>
     <option>2222222</option>
     <option>3333333</option>
     <option>4444444</option>
     <option>5555555</option>
   </select><br><br>
   <input type="button" value="选中添加到左边" onclick="chooseToLeft();"/><br><br>
   <input type="button" value="全部添加到左边" onclick="allToLeft();"/><br>
 </div>
 </body>
</html>

到此这篇关于JS控制下拉列表左右选择实例代码的文章就介绍到这了,更多相关如何使用JS控制下拉列表左右选择内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
微信小程序合法域名配置方法
May 06 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 #Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
You might like
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP错误处理函数
2016/04/03 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
JS异步函数队列功能实例分析
2017/11/28 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python读取oracle函数返回值
2016/07/18 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
毕业生自荐书模版
2014/01/04 职场文书
幼儿园老师寄语
2014/04/03 职场文书
工作会议方案
2014/05/21 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
工作表现证明
2015/06/15 职场文书
水浒传读书笔记
2015/06/25 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android