Dom操作小实例----非常实用，将数据在两个select之间转移
2013-10-05 18:51
477 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
BODY
{
font-family:"Courier";
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
}
.nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
}
.tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:1px;}
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:"Courier";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style></head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" multiple="multiple" size=10 class="td3" id="s">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
/*************************************************************************************************************/
//选中的从左端移到右端
//<input name="add" id="add" type="button" class="button" value="-->" />
document.getElementById("add").onclick=function(){
//获取<select name="first" multiple="multiple" size=10 class="td3" id="first">
var firstElement=document.getElementById("first");
//获取option
var optionElements=firstElement.getElementsByTagName("option");
var len=optionElements.length;
//alert(len)
//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
var secondElement=document.getElementById("second");
//遍历option
for(var i=0;i<len;i++){
var optionElement=optionElements[i];
/*
* firstElement.selectedIndex:
* * 表示当前选中的option的索引值,从0开始
* * 如果没有被选中的，selectedIndex=-1
* * 如果有多个被选中,selectedIndex的值永远是第一个被选中的值
* * javaScript的数组是动态的数组,数组的长度是可变的,索引值也在变
*/
if (firstElement.selectedIndex != -1) {
// alert(firstElement.selectedIndex);
secondElement.appendChild(optionElements[firstElement.selectedIndex]);
}
}
}
//-------------------------------------------------------------------
//全部移动
document.getElementById("add_all").onclick=function()
{
var firstElement=document.getElementById("first");
//获取option
var optionElements=firstElement.getElementsByTagName("option");
var len=optionElements.length;
//alert(len)
//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
var secondElement=document.getElementById("second");
//遍历option
for(var i=0;i<len;i++){
secondElement.appendChild(optionElements[0]);
}
}
//全部移动简化的
/*
document.getElementById("add_all").onclick=function()
{
var firstElement=document.getElementById("first");
var secondElement=document.getElementById("second");
var optionElements=firstElement.getElementsByTagName("option");
var len=firstElement.length;
//遍历option
for(var i=0;i<len;i++){
secondElement.appendChild(optionElements[0]);
}
}
*/
//双击从左边移动到右边
/*
document.getElementById("first").ondblclick=function()
{
var firstElement=document.getElementById("first");
var optionElements=firstElement.getElementsByTagName("option");
var secondElement=document.getElementById("second");
for(var i=0;i<optionElements.length;i++)
{
secondElement.appendChild(optionElements[firstElement.selectedIndex]);
}
}
*/
//双击右移简化
document.getElementById("first").ondblclick=function()
{
var secondElement=document.getElementById("second");
secondElement.appendChild(this[this.selectedIndex]);
}
//选中的从右到左
document.getElementById("remove").onclick=function()
{
var secondElement=document.getElementById("second");
//获取option
var optionElements=secondElement.getElementsByTagName("option");
var len=optionElements.length;
//alert(len)
//获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
var firstElement=document.getElementById("first");
//遍历option
for(var i=0;i<len;i++){
if (secondElement.selectedIndex != -1) {
firstElement.appendChild(optionElements[secondElement.selectedIndex]);
}
}
}
//全部的左移
document.getElementById("remove_all").onclick=function()
{
var secondElement=document.getElementById("second");
var firstElement=document.getElementById("first");
var optionElements=secondElement.getElementsByTagName("option");
var len=secondElement.length;
//遍历option
for(var i=0;i<len;i++){
firstElement.appendChild(optionElements[0]);
}
}
//双击左移
document.getElementById("second").ondblclick=function()
{
var firstElement=document.getElementById("first");
firstElement.appendChild(this[this.selectedIndex]);
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Dom操作小实例----非常实用，将数据在两个select之间转移
- Dom操作小实例----非常实用，将数据在两个select之间转移
- 左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底，相信大家见到过，但觉得挺实用，与大家分享。
- 两个Select互换数据，简单实用
- C++ 一个exe的两个运行实例之间共享数据
- C++ 一个exe的两个运行实例之间共享数据
- [原创]两个listbox之间操作数据交换的问题！
- Android 两个Fragment之间的跳转和数据的传递实例详解
- jquery 操作两个select 来实现值之间的传递
- Activity, Service之间的数据传递通过BroadCastReceive的操作实例代码
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
- DOM的小练习，两个表格之间数据的移动
- jquery 实现两个select之间option的转移
- jQuery 两个select之间option的互相添加操作
- 两个listbox之间转移数据
- 两个云服务器之间对接数据，数据中有照片（base64存库的），5w条得10几分钟了，非常慢，怎么能优化，谢谢
- 两个select之间option的互相添加操作(jquery实现)