关于如何实现右边下拉框中选项的排序一时没有好的解决方法,等想到了回来补充

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-3.3.1.min.js"></script>
<style>
#select1 {
margin-left: 20px;
}
#select2{
margin-left: 20px;
}
span{
display: block;
border: 1px solid orange;
width: 135px;
background-color: coral;
color: whitesmoke;
box-shadow: 1px 1px 10.1px salmon;
margin-bottom: 5px;
margin-top: 5px;
cursor: pointer;
}
.container2{
position: absolute;
left:200px;
top: 8px;
}
</style>
</head>
<body>
<div class="container1">
<select multiple name="" id="select1" style="width:100px;height:150px;">
<!-- multiple:使下拉框能够同时拖选多个选项 -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div>
<span id="add">选中添加到右边&gt;&gt;</span>
<span id="addAll">全部添加到右边&gt;&gt;</span>
</div>
</div>
<div class="container2">
<select multiple name="" id="select2" style="width:100px;height:150px;">
</select>
<div>
<span id="remove">选中删除到左边&lt;&lt;</span>
<span id="removeAll">全部删除到左边&lt;&lt;</span>
</div>
</div>
<script>
window.onload = function(){
var addBtn = document.getElementById("add");
var addAll = document.getElementById("addAll");
var container = document.getElementsByClassName("container1")[0];
var options = container.getElementsByTagName("option");
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var optSore = [];
var valueStore = [];
console.log(options);
function addToRight(){
var i = 0;
for(i=0;i<options.length;i++){
if(options[i].selected){//别用.getAttrbute("selected")
// valueStore.push(options[i].value);
// optSore.push(options[i]);
console.log(options[i]);
var move = select1.removeChild(options[i]);
console.log(move);
select2.appendChild(move); i = i - 1;
//@解决了!options是左边容器中的选项列表,每次移除一个选项后,紧跟在后面的选项就会上移,
//所以要将这里的i前移一位 明天补个示意图
}
}
console.log(optSore,valueStore);
}
function addAllOpt(){
var i = 0;
for(i;i<options.length;i++){
optSore.push(options[i]);
valueStore.push(options[i].value);
}
console.log(optSore,valueStore);
} addBtn.addEventListener("click",addToRight,false);
addAll.addEventListener("click",addAllOpt,false);
}
</script>
<script>
// $(function(){
// $("#add").click(function(){
// var $selectedOpt = $("#select1 option:selected");
// var $remove = $selectedOpt.remove();//我惊了 你呢 原生js有这种操作吗
// $remove.prop("selected",false)//不然添加过去后会停留在被选中的状态
// .appendTo("#select2");
// });
// $("#addAll").click(function(){
// var $removeAll = $("#select1 option").remove();
// $removeAll.appendTo("#select2");
// })
// });
</script>
</body>
</html>

JavaScript 下拉框 左边添加至右边的更多相关文章

  1. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  2. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  3. 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 谈谈如何给下拉框option添加点击事件?

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  5. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  6. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  7. 实现antd下拉框动态添加内容(与数据库交互)

    antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...

  8. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  9. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

随机推荐

  1. html 刷新重载方法汇总

    一.javascript页面刷新重载的方法: <a href="javascript:location.reload();">点击重新载入页面</a> &l ...

  2. 洛谷 P1763 状态压缩dp+容斥原理

    (题目来自洛谷oj) 一天,maze决定对自己的一块n*m的土地进行修建.他希望这块土地共n*m个格子的高度分别是1,2,3,...,n*m-1,n*m.maze又希望能将这一些格子中的某一些拿来建蓄 ...

  3. matlab数学实验--第一章

    一.            数据和变量: 省略号(三个英文句点):表示换行 历史指令调用:用方向键上下 数据显示格式:                    format short          ...

  4. PC timeline

    https://news.microsoft.com/facts-about-microsoft/ 日期 事件               1975年 微软成立               1981年 ...

  5. 移动Web端资源整合

    meta篇 viewreport 视窗宽度 <meta name="viewport" content="width=device-width,initial-sc ...

  6. JavaScript获取mp4文件MIME编码格式,用于判读是否是h.264,解决在线播放只有声音问题

    测试网址:https://gpac.github.io/mp4box.js/test/filereader.html js库:mp4box.js 不能在线播放的:audio/mp4; codecs=& ...

  7. map/reduce/filter/lambda

    Python内建了map()/reduce()/filter()函数. map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的It ...

  8. [蓝桥杯]PREV-7.历届试题_连号区间数

    问题描述 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R个元素)递增 ...

  9. cocos2dx自带物理引擎-创建物理世界

    首先在createScene()里 auto scene = Scene::createWithPhysics(); 创建带有物理的场景 然后再OnEnter里创建边界框 auto body = Ph ...

  10. nginx的启动,停止和重启

    启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...