jQuery 两个select之间option的互相添加操作

最新推荐文章于 2017-08-21 11:34:29 发布
KingCruel
最新推荐文章于 2017-08-21 11:34:29 发布
阅读量2.2k
点赞数
分类专栏： JavaScript
本文链接：https://blog.csdn.net/KingCruel/article/details/47278087
版权
JavaScript 专栏收录该内容
51 篇文章 0 订阅
订阅专栏
效果图
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SelectIndex</title>
    <script src="~/jquery/jquery.min.js"></script>
    <style>
        .mydiv {width: 550px;}
    </style>
    <script>
        $(document).ready(function () {
            var w = $(window).width();
            var h = $(window).height();
            //alert("显示器长度：" + w + "  显示器长度/2：" + w / 2);
            //alert("显示器宽度：" + h + "  显示器宽度/2：" + h / 2);
            $(window).resize();

            //初始化列表数据
            for (var i = 1; i <= 5; i++) {
                $("#fb_list").append("<option value='" + i + "'>公开招标小型机采购00" + i + "</option>");
            }

            //向右侧列表添加数据
            $("#add").click(function () {
                if ($("#fb_list option:selected").length > 0) {
                    $("#fb_list option:selected").each(function () {
                        $("#select_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                        $(this).remove();
                    })
                }
                else {
                    alert("请选择要添加的分包！");
                }
            })

            //将左侧的数据全部添加到右侧，并清空左侧数据
            $("#addList").click(function () {
                if ($("#fb_list option").length > 0) {
                    $("#fb_list option").each(function () {
                        $("#select_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                        $(this).remove();
                    })
                }
                else {
                    alert("请选择要添加的分包！");
                }
            })

            //双击左侧列表一条数据，添加到右侧列表
            $('#fb_list').dblclick(function () {
                $("#fb_list option:selected").each(function () {
                    $("#select_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                    $(this).remove();
                })
            });

            //删除右侧列表选择的数据
            $("#delete").click(function () {
                if ($("#select_list option:selected").length > 0) {
                    $("#select_list option:selected").each(function () {
                        $("#fb_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                        $(this).remove();
                    })
                }
                else {
                    alert("请选择要删除的分包！");
                }
            })

            //将右侧的数据全部添加到左侧，并清空右侧数据
            $("#deleteList").click(function () {
                if ($("#select_list option").length > 0) {
                    $("#select_list option").each(function () {
                        $("#fb_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                        $(this).remove();
                    })
                }
                else {
                    alert("请选择要删除的分包！");
                }
            })

            //双击又侧列表一条数据，添加到左侧列表
            $('#select_list').dblclick(function () {
                $("#select_list option:selected").each(function () {
                    $("#fb_list").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                    $(this).remove();
                })
            });
        })

        //提交按扭获取左右的options所有值传给后台处理
        function sel() {
            var obj = document.getElementById('fb_list');
            var str = "";

            for (var i = 0; i < obj.options.length; i++) {
                if (str.length > 0)
                    str = str + "," + obj.options[i].value;
                else
                    str = obj.options[i].value;
            }
            alert(str);
        }

        //获取显示器长宽，div定位
        $(window).resize(function () {
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").outerWidth()) / 2,
                top: ($(window).height() - $(".mydiv").outerHeight()) / 3
            });
        });
    </script>
</head>
<body>
    <div class="mydiv">
        <form name="form1" method="post" id="form1">
            <table style="width:395px;margin:10px 0;" align="center" class="tblresult">
                <tr>
                    <th colspan="3" style="font-size:14px;text-align: center">添加人员</th>
                </tr>
                <tr>
                    <td>
                        <table class="noborder">
                            <tr>
                                <th>已有人员</th>
                            </tr>
                            <tr>
                                <td>
                                    <select id="fb_list" name="seled" multiple="true" style="width:160px;height:200px;">
                                        <option value="1">张三</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table class="noborder">
                            <tr>
                                <td>
                                    <input id="add" type="button" value=">>" style="width:30px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="addList" type="button" value=">>>>" style="width:40px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="delete" type="button" value="<<" style="width:30px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="deleteList" type="button" value="<<<<" style="width:40px;" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table class="noborder">
                            <tr>
                                <th>备用人员</th>
                            </tr>
                            <tr>
                                <td>
                                    <select id="select_list" name="unseled" multiple="true" style="width:160px;height:200px;">
                                        <option value="4">李四</option>
                                        <option value="5">王五</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center;height:35px;">
                        <input type="button" value="保存" class="btn1" οnclick="sel();" />
                        <input type="button" value="取消" οnclick="javascript:doClose();" class="btn1" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>