用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

js实现列表可左右移动调整 可排序

2013-10-08 作者:程序猿style举报

[javascript]代码库


<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> 












<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> 
            
        


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。