动态下拉框

最新推荐文章于 2022-07-06 10:10:14 发布

up阳光正好

最新推荐文章于 2022-07-06 10:10:14 发布

阅读量593

点赞数

分类专栏：前端文章标签：下拉框左右移动

本文链接：https://blog.csdn.net/zjuwwj/article/details/56009685

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

双击左边的选项，会将该选项移动到右边的下拉列表框中，双击右边的下拉列表框会将该选项移动到左边的下拉列表框中。

1. test.html

<form id="myForm" name="myForm" method="post">
    <table border="0">
        <tr>
            <td>可选课程：<br>
                <select name="selectForm" size="5" ondblclick="addOption()">
                    <option value="yuwen">语文</option>
                    <option value="shuxue">数学</option>
                    <option value="lishi">历史</option>
                    <option value="shengwu">生物</option>
                    <option value="zhengzhi">政治</option>
                    <option value="dili">地理</option>
                </select>
            </td>
            <td>
                --> <br>
                <--
            </td>
            <td>
                已选课程（最多可选三门）：<br>
                <select name="selectTo" size="5" ondblclick="delOption()">
                </select>
            </td>
        </tr>
    </table>
</form>

2. test.js

function addOption() {
    var myForm = document.getElementById("myForm");
    //获得当前被选择的选项的索引
    var index = myForm.selectForm.selectedIndex;
    //在下拉列表框中没有选项时，index为-1
    if(index>-1) {
        //判断已选课程中是否小于3门
        if(myForm.selectTo.length<3) {
            //获取当前选项的文字
            var optionText = myForm.selectForm.options[index].text;
            //获取当前选项的值
            var optionValue = myForm.selectForm.options[index].value;
            //在下拉列表框中添加选项
            console.log(myForm.selectTo.length);
            myForm.selectTo.options[myForm.selectTo.length] = new Option(optionText,optionValue);
            //删除原下拉列表框中的选项
            myForm.selectForm.remove(index);
        } else {
            alert("最多只能选择三门课");
        }
    }
}

function delOption() {
    var myForm = document.getElementById("myForm");
    var index = myForm.selectTo.selectedIndex;
    if(index>-1) {
        //获取当前选项的文字
        var optionText = myForm.selectTo.options[index].text;
        //获取当前选项的值
        var optionValue = myForm.selectTo.options[index].value;
        //在下拉列表框中添加选项
        myForm.selectForm.options[myForm.selectForm.length] = new Option(optionText,optionValue);
        //删除原下拉列表框中的选项
        myForm.selectTo.remove(index);

    }
}