Javascript: 两个列表框之间移动数据
2007-03-26 00:41
323 查看
JsSelect.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language= "javascript">
function $(id)
{
return document.getElementById(id);
}
function Test()
{
var result = window.showModalDialog('Options.html',null,'dialogWidth=500px;dialogHeight=400px;status=no');
if(result)
{
var texts = '';
var values = '';
for(var i = 0; i<result.length; i++)
{
texts += result[i].text + ", ";
values += result[i].value + ", ";
}
if(texts.length >0)
{
texts = texts.substr(0,texts.length-2);
}
if(values.length >0)
{
values = values.substr(0,values.length-2);
}
var objText = $('txtTexts')
if(objText) {objText.value = texts; }
var objValue = $('txtValues')
if(objValue){objValue.value = values;}
}
}
</script>
<style type="text/css">
SelectResult{font-size: 9pt; color: #FFFFFF}
</style>
<BODY>
<input type="textbox" id="txtTexts" />
<input type="Button" id="btnSelect" value="
" onclick="Test()"/>
<input type="textbox" id="txtValues" />
</BODY>
</HTML>
Options.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="Javascript">
function $(id)
{
return document.getElementById(id);
}
function selectSingle()
{
var objFrom = $('selectFrom');
if(objFrom.selectedIndex > -1)
{
var objTo = $('selectTo');
var opt = objFrom.options[objFrom.selectedIndex];
if(!hasSelectedOption(opt))
{
objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
}
}
}
function selectAll()
{
var objFrom = $('selectFrom');
var objTo = $('selectTo');
for(var i = 0; i<objFrom.options.length; i++)
{
var opt = objFrom.options[i];
if(!hasSelectedOption(opt))
{
objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
}
}
}
function hasSelectedOption(opt)
{
var isExist = false;
var objTo = $('selectTo');
for(var j = 0; j<objTo.options.length; j++)
{
if(opt.value == objTo.options[j].value)
{
isExist = true;
break;
}
}
return isExist;
}
function deselectSingle()
{
var objTo = $('selectTo');
if(objTo.selectedIndex > -1)
{
objTo.options[objTo.selectedIndex] = null;
}
}
function deselectAll()
{
var objTo = $('selectTo');
objTo.options.length = 0;
}
function getSelectedOptions()
{
var objTo = $('selectTo');
var arr = new Array();
for(var i= 0; i<objTo.options.length; i++)
{
//arr[i] = [objTo.options[i].text, objTo.options[i].value];
arr[i] = {
'text':objTo.options[i].text,
'value': objTo.options[i].value
};
}
window.returnValue = arr;
window.close();
}
</script>
<style type="text/css">
.btn{
color:#050;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size:small;
font-weight:bold;
width: 25px;
}
</style>
</HEAD>
<BODY>
<table>
<tr>
<td width="45%">
<select multiple id="selectFrom" style="width:200px;height:300px">
<option value="0">Snapping</option>
<option value="1">Neil</option>
<option value="2">Danny</option>
<option value="3">Bollra</option>
<option value="4">Johnson</option>
</select>
</td>
<td width="10%" align="center">
<input type="button" id="btnSelectSingle" value=">" class="btn" onclick="selectSingle()"/><br>
<input type="button" id="btnSelectAll" value=">>" class="btn" onclick="selectAll()"/><br>
<input type="button" id="btnDeselectSingle" value="<" class="btn" onclick="deselectSingle()"/><br>
<input type="button" id="btnUnselectAll" value="<<" class="btn" onclick="deselectAll()"/>
</td>
<td width="45%">
<select multiple id="selectTo" style="width:200px; height:300px">
</select>
</td>
</tr>
<tr>
<td colspan="3" align="right">
<input type="button" id="btnOK" value="OK" onclick="getSelectedOptions()"/>
<input type="button" id="btnCancel" value="Cancel" onclick="javascript: window.close();"/>
</td>
</tr>
</table>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language= "javascript">
function $(id)
{
return document.getElementById(id);
}
function Test()
{
var result = window.showModalDialog('Options.html',null,'dialogWidth=500px;dialogHeight=400px;status=no');
if(result)
{
var texts = '';
var values = '';
for(var i = 0; i<result.length; i++)
{
texts += result[i].text + ", ";
values += result[i].value + ", ";
}
if(texts.length >0)
{
texts = texts.substr(0,texts.length-2);
}
if(values.length >0)
{
values = values.substr(0,values.length-2);
}
var objText = $('txtTexts')
if(objText) {objText.value = texts; }
var objValue = $('txtValues')
if(objValue){objValue.value = values;}
}
}
</script>
<style type="text/css">
SelectResult{font-size: 9pt; color: #FFFFFF}
</style>
<BODY>
<input type="textbox" id="txtTexts" />
<input type="Button" id="btnSelect" value="
" onclick="Test()"/>
<input type="textbox" id="txtValues" />
</BODY>
</HTML>
Options.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="Javascript">
function $(id)
{
return document.getElementById(id);
}
function selectSingle()
{
var objFrom = $('selectFrom');
if(objFrom.selectedIndex > -1)
{
var objTo = $('selectTo');
var opt = objFrom.options[objFrom.selectedIndex];
if(!hasSelectedOption(opt))
{
objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
}
}
}
function selectAll()
{
var objFrom = $('selectFrom');
var objTo = $('selectTo');
for(var i = 0; i<objFrom.options.length; i++)
{
var opt = objFrom.options[i];
if(!hasSelectedOption(opt))
{
objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
}
}
}
function hasSelectedOption(opt)
{
var isExist = false;
var objTo = $('selectTo');
for(var j = 0; j<objTo.options.length; j++)
{
if(opt.value == objTo.options[j].value)
{
isExist = true;
break;
}
}
return isExist;
}
function deselectSingle()
{
var objTo = $('selectTo');
if(objTo.selectedIndex > -1)
{
objTo.options[objTo.selectedIndex] = null;
}
}
function deselectAll()
{
var objTo = $('selectTo');
objTo.options.length = 0;
}
function getSelectedOptions()
{
var objTo = $('selectTo');
var arr = new Array();
for(var i= 0; i<objTo.options.length; i++)
{
//arr[i] = [objTo.options[i].text, objTo.options[i].value];
arr[i] = {
'text':objTo.options[i].text,
'value': objTo.options[i].value
};
}
window.returnValue = arr;
window.close();
}
</script>
<style type="text/css">
.btn{
color:#050;
font-family:'trebuchet ms',helvetica,sans-serif;
font-size:small;
font-weight:bold;
width: 25px;
}
</style>
</HEAD>
<BODY>
<table>
<tr>
<td width="45%">
<select multiple id="selectFrom" style="width:200px;height:300px">
<option value="0">Snapping</option>
<option value="1">Neil</option>
<option value="2">Danny</option>
<option value="3">Bollra</option>
<option value="4">Johnson</option>
</select>
</td>
<td width="10%" align="center">
<input type="button" id="btnSelectSingle" value=">" class="btn" onclick="selectSingle()"/><br>
<input type="button" id="btnSelectAll" value=">>" class="btn" onclick="selectAll()"/><br>
<input type="button" id="btnDeselectSingle" value="<" class="btn" onclick="deselectSingle()"/><br>
<input type="button" id="btnUnselectAll" value="<<" class="btn" onclick="deselectAll()"/>
</td>
<td width="45%">
<select multiple id="selectTo" style="width:200px; height:300px">
</select>
</td>
</tr>
<tr>
<td colspan="3" align="right">
<input type="button" id="btnOK" value="OK" onclick="getSelectedOptions()"/>
<input type="button" id="btnCancel" value="Cancel" onclick="javascript: window.close();"/>
</td>
</tr>
</table>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用JavaScript实现两个列表框的数据移动
- JavaScript：两个可以互相交换数据的列表框
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底
- C#开发学习笔记:C#中实现两个GridControl之间的数据拖拽以及同一个GridControl中的数据行上下移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 两个table之间相互移动数据
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 用javaScript实现两个复选框之间选项的移动和提交目标框中的选项
- 左右两个Select列表框交换数据的JS代码，上下左右都可以移动数据，还可以置顶、沉底，相信大家见到过，但觉得挺实用，与大家分享。
- JavaScript控制两个列表框listbox左右交换数据的方法
- 转载---使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 两个table之间相互移动数据
- DOM的小练习，两个表格之间数据的移动
- javascript根据已知两个日期，获得两个日期之间的所有数据
- javascript表单之间的数据传递