首页 > 其他 > 详细

多行下拉框 操作

时间:2017-01-05 16:14:26      阅读:205      评论:0      收藏:0      [点我收藏+]
    <div style="clear:both;float:left" >


        <div class="centent" style="float:right">
            <select multiple="multiple" id="select1" style="width:100px;height:160px;">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
                <option value="6">选项6</option>
                <option value="7">选项7</option>
            </select>

        </div>
        <div style="width:106px;float:right">
            <input id="add" type="button" value="添加选中&lt;" />
            <input id="add_all" type="button" value="全部添加&lt;&lt;" />
          
            <input id="remove" type="button" value="添加选中&gt;" />
            <input id="remove_all" type="button" value="全部添加&gt;&gt;" />
            
        </div>
        <div class="centent" style="float:right">
            <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            </select>

        </div>
    </div>
<script type="text/javascript" charset="utf-8">
    $(function () {
        //移动到右边
        $("#add").click(function () {
            //获取选中的项,删除然后再移动到右边,这里是选择移动;
            $(#select1 option:selected).appendTo(#select2);
        });
        //移动到左边
        $("#remove").click(function () {
            $(#select2 option:selected).appendTo(#select1);
        })
        //全部到右边
        $("#add_all").click(function () {
            $(#select1 option).appendTo(#select2);
        })
        //全部到左边
        $("#remove_all").click(function () {
            $(#select2 option).appendTo(#select1);
        })
        //双击选项
        $(#select1).dblclick(function () {
            //这里先定位#select1这个大的选择框,然后定位到里面的被选择的元素组陈的集合
            //this就是表示这个集合,当我们按Ctrl或者shift的时候,我们操作的就是这个集合
            //$("option:selected",this).appendTo("#select2");
            $("option:selected", this).appendTo("#select2");
        })
        //双击选项
        $(#select2).dblclick(function () {
            $("option:selected", this).appendTo("#select1");
        })
    });
</script>

 

多行下拉框 操作

原文:http://www.cnblogs.com/zengpeng/p/6252588.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!