动态下拉框

来源：互联网发布：菜谱软件ipad 编辑：程序博客网时间：2024/06/05 11:29

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

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);    }}

0 0