Web前端开发 js 选择下拉框代码

前端开发工程师英语|前端开发小工具|前端开发工作内容描述

html 代码

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>什么是前端项目开发:js选择下拉框</title>
    <style>
        option {
            border-bottom: 1px dashed #ebebeb;
        }
        #div1 {
            width: 100px;
            height: 20px;
            border: 1px solid #ebebeb;
            margin-left: 115px;
        }
    </style>
</head>
<body>
    选定一项或多项后点击添加或移除(按住shift或ctrl可以多选)或在选择项上双击进行添加和移除
    <div id=”div1″></div>
    <form action=”post” name=”myForm”>
        <table border=”0″ width=”300″>
            <tr>
                <td width=”40%”>
                    <!– multiple表示是否允许多项选择–>
                    <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>
                        <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>
                        <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”>
                    <!– 选中要添加的项,把list1中的元素添加到list2中–>
                    <input type=”button” value=”添加” onclick=”moveOption(document.myForm.list1,document.myForm.list2)” />
                    <br/>
                    <br/>
                    <input type=”button” value=”全选” onclick=”moveAllOption(document.myForm.list1,document.myForm.list2)” />
                    <br/>
                    <br/>
                    <!– 选中要删除的项,把list2中元素添加到list1中–>
                    <input type=”button” value=”移除” onclick=”moveOption(document.myForm.list2,document.myForm.list1)” />
                    <br/>
                    <br/>
                    <input type=”button” value=”全删” onclick=”moveAllOption(document.myForm.list2,document.myForm.list1)” />
                    <br/>
                    <br/>
                </td>
                <td width=”40%”>
                    <select style=”width:100%;” multiple name=”list2″ size=”12″ ondblclick=”moveOption(document.myForm.list2, document.myForm.list1)”></select>
                </td>
            </tr>
        </table>
    </form>
    <script>
        //获得list1中的值
        // options:控件中所有option元素
        // remove(index):移除给定位置的选项
        // add(newOption,relOption):相控件中插入新option元素,其位置在相关项(relOption)之前
        var div1 = document.getElementById(“div1”);
        // var div2=document.getElementById(“div2”);
        function getvalue(geto) {
            var allvalue = “”;
            for (var i = 0; i < geto.options.length; i++) {
                allvalue += geto.options[i].value + “,”
            }
            return allvalue;
        }
        function moveOption(e1, e2) {//选中的一项添加到list2中,用selected确定选择了哪一项,e1代表list1中的option元素,e2代表list2中的option元素
            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));//把list1中选择的项的值添加到list2中
                    e1.remove(i);//同时删除list1中的被选中的项
                    i = i – 1;
                }
            }
            div1.innerHTML = i;
            document.myForm.value = getvalue(document.myForm.list2);//把值添加到list2中
        }
        //把list1中的值全部添加到list2中
        function moveAllOption(e1, e2) {//添加全部
            for (var i = 0; i < e1.options.length; i++) {
                var e = e1.options[i];
                e2.options.add(new Option(e.text, e.value));//把list1中的值添加到list2
                e1.remove(i);//删除list1中的值
                i = i – 1;
            }
            document.myForm.value = getvalue(document.myForm.list2);//把值添加到list2中
        }
    </script>
</body>
</html>

android开发属于前端吗|web前端开发入门级工资|web前端开发工资最高吗

» 本文来自:前端开发者 » 《Web前端开发 js 选择下拉框代码》
» 本文链接地址:https://www.rokub.com/4625.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!