JavaScript, select标签元素左右移动功能实现
通过JavaScript设计一段代码,实现下面的功能.初始界面如下图,选中左面标签中的几个选项后再点-->,则将他们移动到右侧框内,同时左侧选项消失.点击====>后,左侧全部选项移动到右侧.点击右侧几个选项后,再点<---,则这些选项移动到左侧,点<====,则右侧全部选项移动到左侧.代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box_L,#choice,#box_R{
display: inline-block;
}
</style>
</head>
<body>
<div id="box_L">
<select id="left" multiple size="10">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select>
</div>
<div id="choice">
<input type="button" width="5px" value="--->" onclick="add()"><br>
<input type="button" width="5px" value="====>" onclick="addall()"><br>
<input type="butoon" width="5px" value="<---" onclick="sub()"><br>
<input type="butoon" width="5px" value="<====" onclick="suball()"><br>
</div>
<div id="box_R">
<select id="right" size="10" multiple>
<option>seven</option>
</select>
</div>
<script>
var left=document.getElementById("left");
var right=document.getElementById("right");
function add(){
var options=left.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
right.appendChild(options[i]);
i--;
}
}
}
function addall(){
var options=left.children;
for (var i=0;i<options.length;i++){
right.appendChild(options[i]);
i--;
}
}
function sub(){
var options=right.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
left.appendChild(options[i]);
i--;
}
}
}
function suball(){
var options=right.children;
for (var i=0;i<options.length;i++){
left.appendChild(options[i]);
i--;
}
}
</script>
</body>
</html>
结果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍jQuery实现分隔条左右拖动功能，包括了jQuery实现分隔条左右拖动功能的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体内容如下 希望本文所述对大家学习jquery分隔条有所帮助。
-
本文向大家介绍.net中实现listBox左右移动，包括了.net中实现listBox左右移动的使用技巧和注意事项，需要的朋友参考一下 今天用到listbox左右移动在网上找了一个，网友分享出来的，感觉不错，这里推荐给大家 以上所述就是本文的全部内容了，希望对大家熟练使用listbox能够有所帮助。
-
本文向大家介绍JavaScript实现移动端拖动元素，包括了JavaScript实现移动端拖动元素的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码，供大家参考，具体内容如下 实现效果： 请切换到移动端页面查看！ 代码实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍vue+swiper实现左右滑动的测试题功能，包括了vue+swiper实现左右滑动的测试题功能的使用技巧和注意事项，需要的朋友参考一下 最近在做一个测试题，前后可以切换题目，点击按钮选择答案，选择答案的同时改变按钮的背景色，如下图所示： 初始代码 我用了vue和swiper。所有的题目是一个对象数组，通过v-for渲染： 一开始我把每道题目的answer存放在对象里面，点击的按钮时
-
本文向大家介绍Jquery实现select multiple左右添加和删除功能的简单实例，包括了Jquery实现select multiple左右添加和删除功能的简单实例的使用技巧和注意事项，需要的朋友参考一下 项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列
-
本文向大家介绍js实现多图左右切换功能，包括了js实现多图左右切换功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js多图左右切换功能，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。