这篇文章主要为大家详细介绍了Java脚本语言实现下拉列表选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java脚本语言实现下拉列表选择框的具体代码，供大家参考，具体内容如下
创建一个页面
** 两个下拉选择框
-设置属性多个的属性-multiple='multiple '(下拉选择框多行显示)
** 四个按钮，有事件
提示：多选按住计算机的计算机的ctrl按键按键或者变化点击选项
代码如下：
超文本标记语言
头
titleHTML示例/标题
style type='text/css '
div #左{
浮动：左；
}
/风格
/头
身体
div id='left ' '
差异
select id=' select 1 ' multiple=' multiple ' style=' width:100px；高度：1ss00px '
选项aaaaaa/选项
选项bbbbbb/选项
optionCCCCCC/option
选项添加添加/选项
期权接受人/期权
/selectbr/
/div
差异
输入类型='按钮'值='选中添加到右边onclick='selToRight()'/br/
输入类型='按钮'值='全部添加到右边onclick='selAllRight()'/
/div
/div
div id='右'
差异
select id=' select 2 ' multiple=' multiple ' style=' width:100px；高度：1ss00p '
选项ffffff/选项
/selectbr/
/div
差异
输入类型='按钮'值='选中添加到左边onclick='selToLeft()'/br/
输入类型='按钮'值='全部添加到左边onclick='selAllLeft()'/
/div
/div
/body
脚本类型='文本/javascript '
//选中添加到左边
函数selToLeft(){
//获取左边挑选对象
var S1=文档。getelementbyid(' select 1 ')；
//获取右边挑选对象
var S2=文档。getelementbyid(' select 2 ')；
//得到左边挑选对象中的每一个选择权
var ops=S2getelementsbytagname(' option ')；
for(var i4=0；i4 ops . length 14){
op4=ops[i4]；
if(op4.selected==true){
S1。appendchild(op4)；
i4-；
}
}
}
//全部添加到左边
函数selAllLeft(){
//获取左边挑选对象
var S1=文档。getelementbyid(' select 1 ')；
//获取右边挑选对象
var S2=文档。getelementbyid(' select 2 ')；
//得到左边挑选对象中的每一个选择权
var ops=S2getelementsbytagname(' option ')；
for(var i3=0；i3ops.lengthi3 ){
op3=ops[i3]；
S1。appendchild(op3)；
i3-；
}
}
//全部添加到右边
函数selAllRight(){
//获取左边挑选对象
var S1=文档。getelementbyid(' select 1 ')；
//获取右边挑选对象
var S2=文档。getelementbyid(' select 2 ')；
//得到左边挑选对象中的每一个选择权
var ops=S1getelementsbytagname(' option ')；
for(var I2=0；i2ops . length 2){
op2=ops[I2]；
S2。appendchild(op2)；
I2-；
}
}
//选中添加到右边
函数selToRight(){
/*
步骤：
1.获取挑选里面的选择权
-getElementByTagName()-返回一个数组
-遍历数组，得到每一个选择权
2.判断选择权是否被选中
-属性选中，判断是否被选中
-selected=true；选中
-selected=false；未选中
3.如果选中，把选中的添加到右边
4.得到选择2
5.添加选择的部分
-appendChild()方法
*/
//获取左边挑选对象
var S1=文档。getelementbyid(' select 1 ')；
//获取右边挑选对象
var S2=文档。getelementbyid(' select 2 ')；
//得到左边挑选对象中的每一个选择权
var ops=S1getelementsbytagname(' option ')；
//遍历工作数组得到每一个选择权选中状态
for(var i1=0；i1ops.lengthi1 ){
op1=ops[i1]；
//判断每一个选择权中挑选属性是否选中
if(op1.selected==true){
//如果选中，添加到右边挑选中
//-使用appendChild()方法
S2。appendchild(op1)；
//每次添加都会使数组长度减一，i1后长度出现异常，所以我们要- ;
i1-；
}
}
}
/脚本
/html
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。