首页 新闻 搜索 专区 学院

修改js代码(上移下移功能不管用)

0
悬赏园豆:40 [已解决问题] 解决于 2016-11-17 09:07
<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript"></script>
  <META NAME="Description" CONTENT="Power by hill"> 
 </head>
 <body>


<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。</p> 
<form method="post" name="myform"> 
<table border="0" width="300"> 
    <tr> 
            <td width="40%"> 
                    <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> 
                            <option value="北京">北京</option> 
                            <option value="上海">上海</option> 
                            <option value="山东">山东</option> 
                            <option value="安徽">安徽</option> 
                            <option value="重庆">重庆</option> 
                            <option value="福建">福建</option> 
                            <option value="甘肃">甘肃</option> 
                            <option value="广东">广东</option> 
                            <option value="广西">广西</option> 
                            <option value="贵州">贵州</option> 
                            <option value="海南">海南</option> 
                            <option value="河北">河北</option> 
                            <option value="黑龙江">黑龙江</option> 
                    </select> 
            </td> 

            <td width="20%" align="center"> 
                <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)">
                <br/> 
                <br/> 
                <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)"> 
            </td> 

            <td width="40%"> 
                <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> 
                </select> 
            </td> 

            <td> 
                <button onclick="changepos(list2,-1)" type="button">上移</button> 
            <br/> 
            <button onclick="changepos(list2,1)" type="button">下移</button> 
            </td> 
    </tr> 
</table> 
值:<input type="text" name="city" size="40"> 
</form> 
<script language="JavaScript"> 
        function moveOption(e1, e2){ 
            try{ 
                    for(var i=0;i<e1.options.length;i++){ 
                        if(e1.options[i].selected){ 
                            var e = e1.options[i]; 
                                e2.options.add(new Option(e.text, e.value)); 
                                    e1.remove(i); 
                                        ii=i-1 
                                } 
                          } 
        document.myform.city.value=getvalue(document.myform.list2); 
                    } 
        catch(e){} 
            } 

        function getvalue(geto){ 
            var allvalue = ""; 
                for(var i=0;i<geto.options.length;i++){ 
                        allvalue +=geto.options[i].value + ","; 
                    } 
                return allvalue; 
             } 

        function changepos(obj,index) { 
            if(index==-1){ 
                    if (obj.selectedIndex>0){ 
                        obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) 
                        } 
               } else if(index==1){ 
                        if (obj.selectedIndex<obj.options.length-1){ 
                                obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) 
                                 } 
                        } 
                } 

</script> 
 </body>
</html>
问题补充:

用jquery方法做出来也可以

yangzailu的主页 yangzailu | 初学一级 | 园豆:10
提问于:2016-11-16 17:06
< >
分享
最佳答案
0
        function changepos(obj, index) {
            var i = obj.selectedIndex;
            if(index == -1) {
                if(i > 0) {
                    var op = obj.options[i];
                    obj.remove(i);
                    obj.add(op, obj.options[i - 1]);
                }
            } else if(index == 1) {
                if(i < obj.options.length - 1) {
                    var op = obj.options[i];
                    obj.remove(i);
                    obj.add(op, obj.options[i + 1]);
                }
            }
        }

 

收获园豆:40
授之以渔 | 小虾三级 |园豆:1076 | 2016-11-16 18:55

十分感谢

yangzailu | 园豆:10 (初学一级) | 2016-11-17 09:08
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册