知识库

支持多选的选框左右移动代码

来源: 本站    类别: 知识库    日期: 2016/9/1

 

将下面的代码复制到<head> 内

<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);
  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('你不能选择这个项目!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
  }
  if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
  List = document.forms[0].chosen;
  if (List.length && List.options[0].value == 'temp') return;
  for (i=0;i<List.length;i++)
  {
     List.options[i].selected = true;
  }
}

</script>

 

将下面的代码复制到<body> 内

 

<table border="0"> <form onSubmit="allSelect()">
              <tr>
                <td>
                  <select name="possible" size="4"
MULTIPLE width=200 style="width: 200px">
                    <option value="1">中国广州
                    <option value="2">中国上海
                    <option value="3">中国北京
                    <option value="4">中国武汉
                    <option value="5">中国站长
                  </select>
                </td>
                  <td><a href="javascript:copyToList('possible','chosen')">添加至右方-->
 
                   
 
                    </a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>
                <td>
                  <select name="chosen" size="4"
MULTIPLE width=200 style="width: 200px;">
                    <option value="temp">从左边选择你的地区 
                  </select>
                </td>
              </tr>  </form>
            </table>


相关文章


Copyright © 2004 - 2020 CNHWW Inc. All Rights Reserved
石家庄市征红网络科技有限公司版权所有 邮政编码:050051
服务电话:0311-85315152 13931185013 在线客服QQ:81447932 / 81447933 邮箱: cnhww@163.com