代码改变世界

Js选择框脚本 移动操作select 标签中的 option 项的操作事项

2011-12-31 15:04  VVG  阅读(2008)  评论(0)  编辑  收藏  举报

题目：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。如下：

在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。

此问题需用到选择框脚本的一些关键属性：

add(newOption,relOption):向控件中插入新的<option>元素，其位置在置顶项（relOption)之前，不指定relOption就添加到最后；

options:控件中所有<option>元素的集合；

remove(index):移除给定位置的选项；

selectedIndex:当前选择项的索引，没选时值为-1，多远时只保存选项中的第一个索引；

selected:值为布尔值，表示选中未选中

第一次思路：

1、取得select1 中选择的项，并把index值存入新的数组，获得被选择的项数。

var form1 = document.forms["form1"];
	var select1 = form1.elements["select1"];
	var select2 = form1.elements["select2"];
	var optArr = [];//新建空数组
	if(select1.options.length == 0) return false;
	for(i=0;i<select1.options.length;i++){
		if(select1.options[i].selected){
			optArr.push(i);//获取选择项的下标值，存入数组
		}
	}

　　

2、循环第一步获得的index数组，用selet2.appendChild(select1.options[index])，添加左边的项到右边；

for(i=0,var x = optArr.length;i<x;i++){
		select2.appendChild(select1.options[optArr[i]]); 
		//appendChild添加文档中的含有的元素会移除原来的元素，所以尝试用 select2.appendChild(select1.options(index)) 
	}

　　

实际代码为：

<!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>
<p>在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。</p>
<p>
<form action="" method="get" id="form1">
<table width="19%" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td width="13%" rowspan="2">

	<select name="select1" size="10" multiple="MULTIPLE" style="width:80px;">
      <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="12%" height="73">
	<input type="button" name="Submit1" value=">>" onclick="sel('select1','select2')" />
	</td>
    <td width="75%" rowspan="2">
	<select name="select2" size="10" multiple="MULTIPLE" style="width:80px;">
      <option value="4">9列</option>
	  <option value="5">10列</option>
	  <option value="6">11列</option>
	  <option value="7">12列</option>
	  <option value="8">13列</option>
    </select>
	</td>
  </tr>
  <tr>
    <td><input type="button" name="Submit2" value="<<"  onclick="sel('select2','select1')"/></td>
  </tr>
</table>
</form>
<p> </p>
<script type="text/javascript">
function sel(select1,select2){//select1 为移除窗口 select2为移动到的窗口
	var form1 = document.forms["form1"];
	var select1 = form1.elements["select1"];
	var select2 = form1.elements["select2"];
	var optArr = [];//新建空数组
	if(select1.options.length == 0) return false;
	for(i=0;i<select1.options.length;i++){
		if(select1.options[i].selected){
			optArr.push(i);//获取选择项的下标值，存入数组
		}
	}
	var x = optArr.length;
	
	for(i=0;i<x;i++){
		select2.appendChild(select1.options[optArr[i]]); 
	}
}

</script>
</body>
</html>

　　

　　这种方法有个问题，就是单选的时候没有问题，多选的时候就有问题了（移动的项和选择的项不一样），查了下代码，原来appendChild移除select1的项以后，select1本身的index索引发生了变化，而循环的时候是按照原来的所以循环的，所以不对！

第二次思路：想到用add()与remove()方法

for(i=0;i<x;i++){		
		var selIndex = optArr[i];
		var newOption = document.createElement("option");
		newOption.value = select1[selIndex].value;
		newOption.text = select1[selIndex].text;
		select2.add(newOption);
		select1.options[i] = null;
	}

这样其实还用到了最开始的循环，结果同第一次结果一样，使用remove()　//select1.options[i] = null;  同样会改变元options的下标值，不行

第三种思路：利用selectedIndex的值来判断，由于selectedIndex在没有选择项的时候值为-1，而且selectedIndex的值始终为第一项的值，所以判断selectedIndex的值来移动删除相关项：

function sel(select1,select2){//select1 为移除窗口 select2为移动到的窗口
	
	var select1 = form1.elements[select1];
	var select2 = form1.elements[select2];
	
	while(select1.selectedIndex > -1){
		//alert(select1.selectedIndex);
		var newOption = document.createElement("option");	
		newOption.value = select1[select1.selectedIndex].value;
		newOption.text = select1[select1.selectedIndex].text;
		select2.add(newOption);
		select1.remove(select1.selectedIndex);
	
	}
}

全部代码：

<!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>
<p>在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。</p>
<p>
<form action="" method="get" id="form1">
<table width="19%" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td width="13%" rowspan="2">

	<select name="select1" size="10" multiple="MULTIPLE" style="width:80px;">
      <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="12%" height="73">
	<input type="button" name="Submit1" value=">>" onclick="sel('select1','select2')" />
	</td>
    <td width="75%" rowspan="2">
	<select name="select2" size="10" multiple="MULTIPLE" style="width:80px;">
      <option value="4">9列</option>
	  <option value="5">10列</option>
	  <option value="6">11列</option>
	  <option value="7">12列</option>
	  <option value="8">13列</option>
    </select>
	</td>
  </tr>
  <tr>
    <td><input type="button" name="Submit2" value="<<"  onclick="sel('select2','select1')"/></td>
  </tr>
</table>
</form>
<p> </p>
<script type="text/javascript">

function sel(select1,select2){//select1 为移除窗口 select2为移动到的窗口
	
	var select1 = form1.elements[select1];
	var select2 = form1.elements[select2];
	
	while(select1.selectedIndex > -1){
		//alert(select1.selectedIndex);
		var newOption = document.createElement("option");	
		newOption.value = select1[select1.selectedIndex].value;
		newOption.text = select1[select1.selectedIndex].text;
		select2.add(newOption);
		select1.remove(select1.selectedIndex);
	
	}
}

</script>
</body>
</html>

　　

　　

　此时左右移动可以正常执行，如果你还有其它方法请留言，感激不近！