下拉列表左右选择案例

单个添加的操作
1、得到select里面的option
-getElementsByTagName（）返回是数组
-遍历数组，得到每一个option
2、判断option是否被选中
-属性：selected 如果选中 selected=true 没有选中就是false
3、如果选中，把选中的添加
-得到select
-添加到选择的部分 appendChild方法
全部选中添加的操作
1、获取第一个select下面的option对象
2、返回数组，遍历数组
3、得到每一个option对象
4、得到select
5、添加到select2下面 appendChild方法、

代码

<html><head><title>Html示例</title><style type="text/css"></style></head><body><div  style="float:left">   //把第一个下拉列表弄在左边  <style> 标签用于为 HTML 文档定义样式信息。<div>
<select id="select1" multiple ="multiple" style="width:100px; height:100px">   //multiple 允许在下拉列表中进行多选
<option> AAAAAA</option>
<option> BBBBBB</option>
<option> CCCCCC</option>
<option> DDDDDD</option>
</select>
</div><div>
<input type="button" value="选中添加到右边" οnclick="selectright()"/> <br/>
<input type="button" value="全部添加到右边" οnclick="allright()"/>
</div></div><div id ="right" ><div>
<select id="select2" multiple ="multiple" style="width:100px;height:100px">
<option> QQQQQQ</option>
<option> KKKKKK</option>
</select>
</div><div>
<input type="button" value="选中添加到左边" οnclick="selectleft()"/><br/>
<input type="button" value="全部添加到左边" οnclick="allleft()"/>
</div></div><script type ="text/javascript">//选中添加到右边的操作function selectright() {var select1 =document.getElementById("select1");var select2=document.getElementById("select2");var options1=select1.getElementsByTagName("option");for(var i=0;i<options1.length;i++) {var option1=options1[i];if(option1.selected==true) {select2.appendChild(option1);i--;  //因为是数组，每次循环数组长度为减1，但是i的长度也会变，最后会出现只能移动几个的现象，而不能全部移动完}}}
//全部添加到右边的操作
function allright() {var select1 =document.getElementById("select1");var select2=document.getElementById("select2");var options1=select1.getElementsByTagName("option");for(var i=0;i<options1.length;i++) {var option1=options1[i];select2.appendChild(option1);i--;
}
}
//选中添加到左边的操作
function selectleft() {var select2 =document.getElementById("select2");var select1=document.getElementById("select1");var options2 =select2.getElementsByTagName("option");for(var i=0;i<options2.length;i++) {var option2 =options2[i];if(option2.selected==true) {select1.appendChild(option2);i--;}}
}
//全部添加到左边的操作
function allleft() {
var select2= document.getElementById("select2");
var select1= document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var i=0;i<options2.length;i++) {var option2 =options2[i];select1.appendChild(option2);i--;
}
}
</script></body>
</html>

　　结果显示

转载于:https://www.cnblogs.com/zengjiao/p/7183882.html

下拉列表左右选择案例相关推荐

python selenium 下拉列表_从下拉列表中选择python selenium选项
我试图使用下面的代码使用selenium(python)从网页上的下拉列表中选择一个选项.在from selenium import webdriver from selenium.webdriver ...
下拉菜单显示隐藏html,根据在下拉列表中选择的内容隐藏和显示HTML元素
我的网站是在ASP classic - VBScript中创建的(不是我的选择,也是我之前没有过的语言).我试图在其中创建一个网页:下拉菜单显示了基于第一个选择内容的额外下拉菜单.我正在尝试使用Jav ...
jquery城市选择案例
1.代码实例 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
excel图表配合下拉菜单_在下拉列表中选择Excel仪表盘图表
excel图表配合下拉菜单 You can make an interactive dashboard in Excel, even if you can't use macros, or prefe ...
html让下拉框自动选择,html下拉框设置连接 html怎么设置下拉列表必须选择
html下拉框怎么设置默认值设置selected属性就可以,具体的用法,首先打开hbuilder软件,新建一个html文档,里面写入一个select下拉框: 然后给select中一个option设置 ...
案例-做一个酒店预定小程序用的日期选择案例
今天给大家分享一个酒店预定小程序用的日期选择案例,我是做的支付宝小程序,如果需要应用到微信小程序,请将相关字眼改成微信用的字眼,比如onTap改bindtap,a:if或者a:for改成wx:if和w ...
信息系统项目管理师选择案例论文三方面考试心得分享
今年上半年高项考试真可谓有惊无险,有两门刚好采在及格线上,另外一门也考的不高,才48分,这次算是运气侥幸过关吧.最担心的论文部分也在幸福哥的指导下过关了.本来个人估分是不报什么希望的,当查到成绩那一刻 ...
jsp中JAVA代码取select值_jsp获取下拉列表select选择的值 | 学步园
看下表单的内容: A B C D ----------------------------------------------------------------------------------- ...
html中国家的下拉列表,jQuery Select下拉列表国家选择插件
jQuery Select下拉国家选择插件简介本文提供JQuery国家选择插件制作select下拉框带搜索功能,和图标的下拉国家列表选择插件代码.支持搜索快速查找,带国旗的国家下拉选择插件! jQu ...

下拉列表左右选择案例

下拉列表左右选择案例相关推荐

最新文章

热门文章