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

来源：互联网发布：王宝强演技知乎编辑：程序博客网时间：2024/05/17 22:17

来自：http://www.cnblogs.com/NNUF/

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

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

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

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);         }}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>

0 0

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

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