列表移动

 

效果图

           

 <script type="text/javascript">
        function moveList(fromId, toId) {
          
            var fromList = document.getElementById(fromId);
            var fromLen = fromList.options.length;
            var toList = document.getElementById(toId);
            var toLen = toList.options.length;
         
            var current = fromList.selectedIndex;//需要移动的当前序号
           
            while (current > -1) {
                var o = fromList.options[current]; //需要移动的当前选择项对象
                var t = o.text;
                var v = o.value;
                //根据已选项新建一个列表选项

                var optionName = new Option(t, v, false, false);
                //将该选项添加到另一列表
                toList.options[toLen] = optionName;
                toLen++;
                //将该选项从列表中删除
                fromList.options[current] = null;
                current = fromList.selectIndex;
            }
        }
        </script>
        
        <style type="text/css">
            #leftList,#rightList,#buttons{display: block;float: left;margin: 10px;}
            #leftList,#rightList{width: 50px;overflow-y:hidden}
            #buttons{width: 40px;}
        </style>

 

 <select name="leftList" id="leftList" multiple="multiple" size="6">
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
            <div id="buttons">
                <input type="button" name="to" id="to" value=">>" onclick="moveList('leftList', 'rightList')"/>
                <input type="button" name="backTo" id="backTo" value="<<" onclick="moveList('rightList', 'leftList')"/>
            </div>
            <select name="rightList" id="rightList" multiple="multiple" size="6">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>