JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动

前言

最近开始学JavaScript，发现这个案例在网上写的都不是很清楚，特意在此上传一遍，还是个新手，写的不好的地方请指出。
效果图如下：

接下来是代码。

1.准备工作

编写HTML代码。设计结构与显示样式，具体代码如下：

<style>
	select {
		width: 100px;
        height: 200px;
        font-size: 16px;
    }
</style>
<form name="myform">
        <table width="300">
            <tr>
                <td width="40%">
                    <select multiple name="list1">
                        <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="add()"/>
                    <input type="button" value="删除" onclick="removeOption()"/>
                </td>
                <td width="40%">
                    <select multiple name="list2" id="list2">
                        <option value="重庆">重庆</option>
                        <option value="福建">福建</option>
                        <option value="甘肃">甘肃</option>
                    </select>
                </td>
                <td>
                    <input type="button" value="上移" onclick="upOption()" id="up"/>
                    <input type="button" value="下移" onclick="doOption()"/>
                </td>
            </tr>
        </table>
    </form>

接下来在HTML代码后面添加JavaScript代码

<script>
    //获取左边下拉框中所有option
    var list1 = document.myform.list1.options;
    //获取左边下拉框中所有option
    var list2 = document.myform.list2.options;
</script>

2.添加功能

   /*
    添加的函数
    左边添加到右边，所以只需遍历左边下拉框
     */
    function add() {
        for (var i = 0; i < list1.length; i++) {        //遍历
            if (list1[i].selected) {                    //判断某个元素是否被选中
                var op = document.createElement('option');          //创建option标签节点
                var text = document.createTextNode(list1[i].value);//创建文本节点
                op.appendChild(text);                                  //将文本添加到option中
                document.myform.list2.appendChild(op);   //添加到select标签的子节点
                list1.remove(i);                            //删除左边的
            }
        }
    }

3.删除功能

    /*
    删除的函数
    从右边删除，左边显示出来，与前面添加的函数相反
     */
    function removeOption() {
        for (var i = 0; i < list2.length; i++) {
            if (list2[i].selected) {
                console.log(list2[i].value);
                var op = document.createElement('option');
                var text = document.createTextNode(list2[i].value);
                op.appendChild(text);
                document.myform.list1.appendChild(op);
                list2.remove(i);
            }
        }
    }

4.上移功能

    /*
        上移
        更换option标签内的value与text文本
         */
    
        function upOption() {
            for (var i = 0; i < list2.length; i++) {
                if (list2[i].selected) {
                    if (!list2[i - 1].selected) {
                        var tempValue = list2[i].value;                //获取被选中的value
                        var tempText = list2[i].innerHTML;            //获取被选中的text文本
                        list2[i].innerHTML = list2[i - 1].innerHTML;//将后边一个与前面一个的内容置换
                        list2[i].value = list2[i - 1].value;
                        list2[i].selected = false;                   //使该内容为不选中状态
                        list2[i - 1].innerHTML = tempText;
                        list2[i - 1].value = tempValue;
    
                    }
                }
    
            }
        }

5.下移功能

    /*
    下移，与前面上移相反即可
     */

    function doOption() {
        for (var i = list2.length - 2; i >= 0; i--) {
            if (list2[i].selected) {
                if (!list2[i + 1].selected) {
                    var tempValue = list2[i].value;
                    var tempText = list2[i].innerHTML;
                    list2[i].innerHTML = list2[i + 1].innerHTML;
                    list2[i].value = list2[i + 1].value;
                    list2[i].selected = false;
                    list2[i + 1].innerHTML = tempText;
                    list2[i + 1].value = tempValue;
                }
            }

        }
    }

#整个文档下载链接如下