可以动态选取多个或者一个项的js方法。（可以动态添加删除选项 js）

来源：互联网发布：java 根据ip获取地区编辑：程序博客网时间：2024/05/22 03:13

本次目的为下图：

测试了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;
   }
}
}

<!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 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>

可以动态选取多个或者一个项的js方法。（可以动态添加 删除选项 js）

可以动态选取多个或者一个项的js方法。（可以动态添加删除选项 js）