david20080309 发表于 2013-2-7 18:31:42

js 操作option上下,左右移动

关键词:js 操作option上下,左右移动

查看效果:js 操作option上下,左右移动

代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>select多项选择,上下操作,左右移动操作</title>
<script language="javascript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
// var fromList =document.forms +'.'+ from;
// var toList =document.forms+'.'+ to;
var fromList = document.getElementById(from);
var toList =document.getElementById(to);
  if (toList.options.length > 0 && toList.options.value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options;
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('这个是空的!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options = new Option(txt,val);
      fromList.options = null;
      i--;
    }
  }
  if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据
{
  List = document.forms.chosen;
  if (List.length && List.options.value == 'temp') return;
  for (i=0;i<List.length;i++)
  {
     List.options.selected = true;
  }
}
function updown(formname,type)
{var tempid;
var formname = document.getElementById(formname);
if(formname.options.length>2)
  {
     for (tempid = 0;tempid < formname.options.length;tempid++)
   {    var current = formname.options;
  if (current.selected)
{
if(type == 'up' )
{
if (tempid == 0)
{return;}
newid = tempid-1;
}
else
{
if(tempid == (formname.options.length-1))
{return;}
newid = tempid+1;
}
tempchangetext = current.text;
                tempchangeval = current.value;
current.text = formname.options.text;
    current.value = formname.options.value;
formname.options.text = tempchangetext;
formname.options.value = tempchangeval;
formname.options.selected = false;
formname.options.selected = true;
return;
}
  }
  }  
}

</script>
</head>

<body>
<table border="0"> <form >
              <tr>
                <td>
                  <select  id="possible" size="4"  MULTIPLE width=200 style="width: 200px">
                    <option value="1">多选1</option>
                    <option value="2">多选2</option>
                    <option value="3">多选3</option>
                    <option value="4">多选4</option>
                  </select>
                </td>
                  <td><a href="javascript:copyToList('possible','chosen')">添加至右方→</a><br>
                    <br>
                      <a href="javascript:copyToList('chosen','possible')">←添加至左方</a></td>
                <td>
                  <select   id="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
                    <option value="temp">从左边选择你的地区
                  </select>
                </td>
              </tr>  </form>
              <tr><td><a href="javascript:updown('possible','up')">up</a> 单选 <a href="javascript:updown('possible','down')">down</a></td><td>option移动</td><td><a href="javascript:updown('chosen','up')">up</a> 单选 <a href="javascript:updown('chosen','down')">down</a></td></tr>
            </table>
</body>
</html>
页: [1]
查看完整版本: js 操作option上下,左右移动