下拉框内容左右移动效果

最新推荐文章于 2023-03-27 21:16:36 发布
前端大刘
最新推荐文章于 2023-03-27 21:16:36 发布
阅读量1.1k
点赞数
分类专栏： html/css 文章标签：下拉框内容左右移动效果
本文链接：https://blog.youkuaiyun.com/window_10/article/details/17538913
版权
html/css 专栏收录该内容
2 篇文章
订阅专栏
<HTML>
    
    <HEAD>
        <TITLE>
            选择下拉菜单
        </TITLE>
        <META NAME="Description" CONTENT="Power by hill">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </HEAD>
    
    <BODY>
        <p>
            选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。
        </p>
        <form method="post" name="myform">
            <table border="0" width="300">
                <tr>
                    <td width="40%">
                        <select style="WIDTH:100%" multiple name="list1" size="12" οndblclick="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>
                        </select>
                    </td>
                    <td width="20%" align="center">
                        <input type="button" value="添加" οnclick="moveOption(document.myform.list1, document.myform.list2)">
                        <br/>
                        <br/>
                        <input type="button" value="删除" οnclick="moveOption(document.myform.list2, document.myform.list1)">
                    </td>
                    <td width="40%">
                        <select style="WIDTH:100%" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
                        </select>
                    </td>
                    <td>
                        <button οnclick="changepos(list2,-1)" type="button">
                            上移
                        </button>
                        <br/>
                        <button οnclick="changepos(list2,1)" type="button">
                            下移
                        </button>
                    </td>
                </tr>
            </table>
            值：
            <input type="text" name="city" size="40">
        </form>
        <script language="JavaScript">
            function moveOption(e1, e2) {
                try {
                    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));
                            e1.remove(i);
                            ii = i - 1
                        }
                    }
                    document.myform.city.value = getvalue(document.myform.list2);
                } catch(e) {}
            }
            function getvalue(geto) {
                var allvalue = "";
                for (var i = 0; i < geto.options.length; i++) {
                    allvalue += geto.options[i].value + ",";
                }
                return allvalue;
            }
            function changepos(obj, index) {
                if (index == -1) {
                    if (obj.selectedIndex > 0) {
                        obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex - 1))
                    }
                } else if (index == 1) {
                    if (obj.selectedIndex < obj.options.length - 1) {
                        obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex + 1))
                    }
                }
            }
        </script>
    </BODY>

</HTML>