jquery多选下拉框左右复制

最新推荐文章于 2023-10-17 11:41:35 发布

原创最新推荐文章于 2023-10-17 11:41:35 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #multiple #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，展示了如何使用jQuery库来实现DOM元素的操作功能，包括将选项从一个选择框移动到另一个选择框以及在目标选择框内上下移动已选选项。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="xxx/jquery.js"></script>
</head>
<script type="text/javascript">
    function moveToRight(){
        $("#D1 option:selected").each(function(){
            var option = $(this)
            $("#D1").remove(option);
            $("#D2").append(option);
        });
    }
    function moveUp(){
        $('#D2 option:selected').each(function(){
            var option = $(this);
            //alert(option.prev().size());
            if(option.prev().size()!=0){
                option.prev().before(option);
            }
        });
    }
</script>
<body>
    <select size="3" id="D1" multiple>
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
    </select>
        <input type=button value=">" onclick="moveToRight()"/>
    <select size="3" id="D2" multiple>
    </select>
        <input type=button value="向上" onclick="moveUp()"/>
        <input type=button value="向下" onclick="moveDown()"/>
</body>
</html>