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

最新推荐文章于 2023-04-13 10:41:24 发布

sweetllh

最新推荐文章于 2023-04-13 10:41:24 发布

阅读量841

点赞数

分类专栏： javascript 表格

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

表格

8 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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>

转载出处：http://www.cnblogs.com/NNUF/

sweetllh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js选择框脚本移动操作select 标签中的 option 项的操作事项

题目：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。如下：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。此问题需用到选择框脚本的一些关键属性：add(newOption,relOption):向控件中插入新的元素，其位置在置顶项（relOption)之前，不指定relOption就添加到最后；options:控件中所有元
复制链接

扫一扫