js实现-下拉列表左右选择
下拉列表左右选择
* 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮，有事件
* 选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/
* 全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
* 全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
<body> <div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple" style="width:100px;height:100px;">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
<option>CCCCCCCC</option>
<option>DDDDDDDD</option>
<option>EEEEEEEE</option>
</select>
</div> <div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div> <div id="s2">
<div>
<select id="select2" multiple="multiple" style="width:100px;height:100px;">
<option>QQQQQQQQ</option>
</select>
</div> <div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div> <script type="text/javascript"> //实现全部添加到左边
function allToLeft() {
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象 4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
//获取select2
var select2 = document.getElementById("select2");
//获取select1
var select1 = document.getElementById("select1");
//获取select2里面的option
var options1 = select2.getElementsByTagName("option");
//遍历数组
for(var m=0;m<options1.length;m++){
//得到每一个option
var op11 = options1[m];
//添加到select1里面
select1.appendChild(op11);
m--;
}
} //选择添加到左边
function selToLeft() {
/*
1、获取select2里面的option对象
2、返回是数组，遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true：选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
//获取select1
var s1 = document.getElementById("select1");
//获取到select2
var s2 = document.getElementById("select2");
//得到s1里面的option对象
var opss = s2.getElementsByTagName("option");
//遍历数组
for(var aa=0;aa<opss.length;aa++) {
//得到每一个option
var op = opss[aa];
//判断是否被选中
if(op.selected == true) { //被选中
//添加到select1里面
s1.appendChild(op);
aa--;
}
}
} //全部添加到右边
function allToRight() {
/*
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
//得到select2
var s2 = document.getElementById("select2");
//得到select下面的option对象
var s1 = document.getElementById("select1");
var ops = s1.getElementsByTagName("option");//返回的是数组
//遍历数组
for(var j=0;j<ops.length;j++) {
//得到每一个option对象
var op1 = ops[j];
//添加option到s2下面
s2.appendChild(op1);
j--;
}
} //实现选中添加到右边
function selToRight() { /*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组，得到每一个option
2、判断option是否被选中
- 属性 selected，判断是否被选中
** selected= true: 选中
** selected= false：没有选择
3、如果是选中，把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/
//获取select1里面的option
//获取select2
var select2 = document.getElementById("select2");
//得到select1
var select1 = document.getElementById("select1");
//得到option
var options1 = select1.getElementsByTagName("option"); //遍历数组
for(var i=0;i<options1.length;i++) {
var option1 = options1[i];//得到每一个option对象
//判断是否被选中
if(option1.selected == true) {
//添加到select2里面 select2.appendChild(option1);
i--; }
} } </script> </body>
js实现-下拉列表左右选择的更多相关文章
- Jquery实现下拉列表左右选择
知识点: jquery 的 click dbclick 事件 appendTo方法 <!DOCTYPE html> <html> <head> <met ...
- jQuery学习(七)——使用JQ完成下拉列表左右选择
1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...
- Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
- JavaScript案例五：下拉列表左右选择
用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- JS控制GridView行选择
ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显 ...
- JavaScript基础2——下拉列表左右选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生JS实现下拉列表
1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...
随机推荐
- Windows命令 dos
1.dos下运行netstat -na 查看本机开启的端口
- MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令
介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令 ...
- 系统间通信（4）——IO通信模型和JAVA实践 中篇
4.多路复用IO模型 在"上篇"文章中,我们已经提到了使用多线程解决高并发场景的问题所在,这篇文章我们开始 4-1.现实场景 我们试想一下这样的现实场景: 一个餐厅同时有100位客 ...
- lift and throw
import java.util.*; import java.math.*; public class Main { public static void main(String[] args) { ...
- c# 文件转换成base64
private static void ReadFromFile() { FileStream fsForRead = new FileStream("c9a78c8a-29b0-410d- ...
- Top K 问题
Example Given [3,10,1000,-99,4,100] and k = 3. Return [1000, 100, 10]. 解法有以下几种: 1. bubble sort k tim ...
- 【POJ-2482】Stars in your window 线段树 + 扫描线
Stars in Your Window Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11706 Accepted: ...
- 【CQOI2016纯净整合】BZOJ-4519~4524 （6/6）
感觉CQOI的难度挺好的,比较贴近自身,所以拿出来做了一下 CQOI2016 Day1 T1:不同的最小割 涉及算法:最小割/分治/最小割树 思路: 最小割树裸题,直接分治最小割,记录下答案,最后排序 ...
- 何解決 LinqToExcel 發生「無法載入檔案或組件」問題何解決 LinqToExcel 發生「無法載入檔案或組件」問題
在自己的主機上透過 Visual Studio 2013 與 IISExpress 開發與測試都還正常,但只要部署到測試機或正式機,就是沒辦法順利執行,卡關許久之後找我協助.我發現錯誤訊息確實很「一般 ...
- Bzoj2118 墨墨的等式
Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 1488 Solved: 578 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+ ...