两个下拉列表框value值相互转移

最新推荐文章于 2024-07-07 07:22:25 发布

冰冻的心1

最新推荐文章于 2024-07-07 07:22:25 发布

阅读量137

点赞数

分类专栏： js+html+css 文章标签： html

本文链接：https://blog.csdn.net/u011081588/article/details/84547524

版权

js+html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[size=medium][size=medium]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtmlSelect.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript">
window.οnlοad=function(){
/*******************************右移********************************************/
document.getElementById("button3").οnclick=function(){
var firstSelect= document.getElementById("select"); //第一个下拉框
var twoSelect= document.getElementById("select1"); //第二个下拉框
var optionfirst=firstSelect.getElementsByTagName("option"); //获得的是一个数组
var len=optionfirst.length;
for(var i=0;i<len;i++){
var optionName=optionfirst[i];//获得所有的 option 里面的值
//
//必须将选中的移动，，所以
// alert(firstSelect.selectedIndex); //没有被选中的下标永远都是-1，选中的为该当前下标
if(firstSelect.selectedIndex!=-1){
twoSelect.appendChild(optionfirst[firstSelect.selectedIndex]);
}
}
}

/*******************************左移********************************************/
document.getElementById("button2").οnclick=function(){
var firstSelect= document.getElementById("select"); //第一个下拉框
var twoSelect= document.getElementById("select1"); //第二个下拉框
var optionfirst=twoSelect.getElementsByTagName("option"); //获得的是一个数组
var len=optionfirst.length;
for(var i=0;i<len;i++){
var optionName=optionfirst[i];//获得所有的 option 里面的值
//
//必须将选中的移动，，所以
// alert(firstSelect.selectedIndex); //没有被选中的下标永远都是-1，选中的为该当前下标
if(twoSelect.selectedIndex!=-1){
firstSelect.appendChild(optionfirst[twoSelect.selectedIndex]);
}
}
}

/*******************************全部右移********************************************/
document.getElementById("button4").οnclick=function(){
var firstSelect= document.getElementById("select"); //第一个下拉框
var twoSelect= document.getElementById("select1"); //第二个下拉框
var optionfirst=firstSelect.getElementsByTagName("option"); //获得的是一个数组
var len=optionfirst.length;
for(var i=0;i<len;i++){
twoSelect.appendChild(optionfirst[0]);
}

}

/*******************************全部左移********************************************/
document.getElementById("button").οnclick=function(){
var firstSelect=document.getElementById("select1");

//第一个下拉框
var twoSelect= document.getElementById("select"); //第二个下拉框
var optionfirst=firstSelect.getElementsByTagName("option"); //获得的是一个数组
var len=optionfirst.length;
for(var i=0;i<len;i++){
twoSelect.appendChild(optionfirst[0]);//只要控制移动的下标为0 就移动
}

}

/*******************************双击移动到右边********************************************/
document.getElementById("select").οndblclick=function(){
var first=this.getElementsByTagName("option");
var twoSelect= document.getElementById("select1"); //第二个下拉框
for(var i=0;i<first.length;i++){
twoSelect.appendChild(first[this.selectedIndex])

}
}

/*******************************双击移动到左边实现的重要的一个原理是找选中的下标即this.selectedIndex ********************************************/
document.getElementById("select1").οndblclick=function(){
/*var first=this.getElementsByTagName("option");
var twoSelect= document.getElementById("select"); //第二个下拉框
for(var i=0;i<first.length;i++){
twoSelect.appendChild(first[this.selectedIndex])
} */

//优化后的。。。
var first=this.getElementsByTagName("option");
alert(this.selectedIndex);
var twoSelect= document.getElementById("select");
twoSelect.appendChild(this[this.selectedIndex]);
}

}

</script>

</head>

<body>
<div>
<select name="select" size="15" multiple="multiple" id="select" >
<option value="数学">数学</option>
<option value="语文">语文</option>
<option value="外语">外语</option>
<option value="物理">物理</option>
<option value="化学">化学</option>
<option value="生物">生物</option>
<option value="历史">历史</option>
</select>
<input type="submit" name="button2" id="button2" value="《《左移" />
<input type="submit" name="button3" id="button3" value="右移》》" />
<input type="submit" name="button4" id="button4" value="全部右移》》" />
<input type="submit" name="button" id="button" value="《《全部左移" />
<select name="select2" size="15" multiple="multiple" id="select1" >

</select>
<br/>
<br/>
</div>
</body>
</html>[/size]
[/size]

冰冻的心1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个下拉列表框value值相互转移

[size=medium][size=medium] MyHtmlSelect.html window.onload=function(){ /*******************************右移************************************...
复制链接

扫一扫