|
|
测试了4种，演示2和演示4比较好点。演示2的错误已经修正了
演示1：========================================================
有两个select1,select2表单，select1已有option,通过两个按钮add1,del2
点add1时把select1中选中的项添加到select2中，select1选中项删除
点del2时，del2中选中项删除，返回到select1中的原位置
谢谢！！
---------------------------------------------------------------
送给你一个函数，可以在任意个select间增加或者删除option，只要你传递两个参数过去就行了，
注意：本函数主要用于多选框：
<Select name = Province id = Province size = 7 multiple = true >
<option value = 1>山东
</Select>
<script language = javascript>
/*
*多选下拉列表动态增加函数：Create(SourseObject,TargetObject)；
*参数:SourseObject:表示要动态添加的源Select；
*参数:TargetObject:表示要动态接受的目的Select；
*例:Create(document.all.SourSelect,document.all.TarSelect);
*作者:月影飞鸿 于 2003-05-26晚作
*/
function Create(SourceSelect,TargetSelect)
{
var IsCreate = true;
var theIndex = SourceSelect.selectedIndex;
var theLength = SourceSelect.length ;
if (theIndex == -1 ) //如果源Select为空的话，则退出过程
return false;
while (IsCreate) //添加到目的Select循环
{
theValue = SourceSelect.options[theIndex].text; //得到所选择的文本
TargetSelect.options.add(new Option(theValue)); //目的Select增加一个文本
theIndex = theIndex + 1; //如果是选择多列的话，对下一个进行处理
if (theIndex == theLength) //theLength 如果是4的话，则theIndex应该是3，
{ //如果两者想等的话，则源Select多了一个值，
IsCreate = false; //所以需要退出循环
break;
}
if (SourceSelect.options[theIndex].selected == false)//如果没有被选择的话，则退出循环
{
IsCreate = false;
}
}
while (IsCreate == false) //删除源select循环
{
SecIndex = SourceSelect.selectedIndex; //动态得到被选择的索引
theLength = SourceSelect.length ; //动态得到Select的长度
SourceSelect.remove(SecIndex); //删除指定索引的元素
if (theLength == 1) //表示最后一个元素已删除，
return false; //源select空了，退出循环
if (theLength == SecIndex + 1) //表示多选的已全部删掉，退出循环
return false;
if (SourceSelect.options[SecIndex].selected == false)
{
IsCreate = true;
}
}
}
</script>
演示二：==============================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Power by 31u.net</title>
<script language="javascript">
<!--
function Add(ObjSource,ObjTarget){
for(var i=0;i<ObjSource.length;i++){
if(ObjSource.options[i].selected){
var opt=document.createElement("OPTION");
opt.value=ObjSource.options[i].value;
opt.text=ObjSource.options[i].text;
ObjTarget.add(opt);
ObjSource.options.removeChild(ObjSource.options[i--]);
opt.selected=true;
}
}
}
function AddAll(ObjSource,ObjTarget){
SelectAll(ObjSource);
Add(ObjSource,ObjTarget);
}
function SelectAll(ObjSource){
for(var i=0;i<ObjSource.length;i++){
ObjSource.options.selected=true;
}
}
function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head>
<body>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<select name="dltSource" size="10" multiple style="width:100% ">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
<option value="0">河南</option>
<option value="0">江苏</option>
<option value="0">浙江</option>
<option value="0">海南</option>
<option value="0">福建</option>
<option value="0">山东</option>
<option value="0">青海</option>
<option value="0">宁夏</option>
<option value="0">内蒙古</option>
<option value="0">新疆</option>
<option value="0">陕西</option>
</select>
</td>
<td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="添加" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>
<p style="width:100%" align="center"><input type="button" value="添加全部" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input type="button" value="删除" onClick="Add(frmDisplay.dltTarget,document.all.dltSource)" title="删除"></p>
<p style="width:100%" align="center"><input type="button" value="删除全部" onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)" title="删除全部"></p>
</td>
<td width="150">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<select name="dltTarget" size="10" multiple style="width:100% "></select>
</form>
</td>
</tr>
<tr>
<td align="center">从此长大</td>
<td align="center"><a href=
http://www.31u.net>31u.net</a></td>
<td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">
<input type="button" value="提交" onClick="doSubmit()">
</td>
</tr>
</table>
</body>
</html>
演示三：========================================================================
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect").options[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords.options[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords.options[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords.options[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.options.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords.options[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>
演示四：===========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>国外演示</title>
</head>
<body><script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;
function insertOptionBefore(num)
{
var elSel = document.getElementById('selectX');
if (elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}
function removeOptionSelected()
{
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}
function appendOptionLast(num)
{
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeOptionLast()
{
var elSel = document.getElementById('selectX');
if (elSel.length > 0)
{
elSel.remove(elSel.length - 1);
}
}
//-->
</script>
<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />
Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />
Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />
Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />
Remove Last
</form>
</body>
</html>
