select列表左右选择框

最新推荐文章于 2024-05-30 14:24:22 发布

祁连山的野孩子

最新推荐文章于 2024-05-30 14:24:22 发布

阅读量4.3k

点赞数 1

分类专栏： jqurey案列文章标签： select jqurey

本文链接：https://blog.csdn.net/qq_17254307/article/details/53814568

版权

jqurey案列专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述

HTML布局

<html>
  <head>
    <base href="<%=basePath%>">

    <title>下拉框双向选择</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=path %>/lib/jquery_1.8.3.min.js"></script>
    <script type="text/javascript" src="<%=path %>/js/selectDemo.js"></script>
    <style type="text/css">
        .ourterBorder{width:400px;height:200px;border:1px solid black;}
        .innerDiv{height: 150px;float: left;}
        .innerDiv input{width: 110px;}
        .innerDiv,#buttonDiv{width: 110px;line-height: 150px;}
        #select1{width: 110px;height: 150px;}
        #select2{width: 110px;height: 150px;}
    </style>
  </head>

  <body>
            <div class="innerBorder">
            <div class="innerDiv">
                <select id="select1" multiple="multiple">
                    <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>
                </select>
            </div>
            <div class="innerDiv" id="buttonDiv">
                <input id="copyRight" type="button" value="复制到右侧"/>
                <input id="copyAllRight" type="button" value="全部复制到右侧"/>
                <input id="copyLeft" type="button" value="复制到左侧"/>
                <input id="copyAllLeft" type="button" value="全部复制到左侧"/>
            </div>
            <div class="innerDiv">
                <select id="select2" multiple="multiple">
                </select>
            </div>
            </div>
  </body>
</html>

js代码

$(function(){
    //将选中的复制到右侧
    $("#copyRight").click(function(){
        //获取所有选中option
        var $options = $("#select1 option:selected");
        //删除select中选中的option
        var $remove = $options.remove();
        //将选中的option添加到select2中
        $remove.appendTo('#select2');
        $options.each(function(){
                alert(this.value);
        });
    });

    //将左侧的全部复制到右侧
    $("#copyAllRight").click(function(){
        //只选择select1下的option元素
        var $allOption = $("#select1 option");
        var $allRemove = $allOption.remove();
        $allRemove.appendTo("#select2");
        $allOption.each(function(){
                alert(this.value);
        });
    });

    //将左侧复制到右侧
    $("#copyLeft").click(function(){

        var $optino = $("#select2 option:selected");
        var $remove = $optino.remove();
        $remove.appendTo('#select1');

    });

    //全部复制到右侧
    $("#copyAllLeft").click(function(){

        var $allOption = $("#select2 option");
        var $allRemove = $allOption.remove();
        $allRemove.appendTo("#select1");
        alert(1)
        getSelectedValue($allOption);
        /*$allOption.each(function(){
                alert(this.value);
        });*/
    });
});


function getSelectedValue(opthins){
    opthins.each(function(){
            alert(this.val());
        });
}

祁连山的野孩子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
select列表左右选择框

效果图 HTML布局<html> <head> <base href="<%=basePath%>"> <title>下拉框双向选择</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta
复制链接

扫一扫

专栏目录