MVC Sample ListBox 2 Listbox (Select multiple)

@{
    ViewBag.Title = "角色人員維護-查詢";
}
<table style="width:100%" border="0" cellspacing="0">
    <tbody>
        <tr>
            <td height="25" class="menu_1">
                <span class="main_title">
                    &nbsp;&nbsp;<span>@ViewBag.Title</span>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="1%"></td>
            <td width="98%" class="highLightText">
                <br>
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Edit")';" value="查詢">
                <input type="button" class="cnnFormButton" onclick="javascript:;" value="清除">
                <br>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="2">基本資料</td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>公司別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <select id="selCompanyType" act='@Url.Action("GetCompanyList", "CommUtil", new { compId = "3", systemId = "6" })'></select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色ID:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <input type="text" style="width:80px;"> <input type="button" value="..." />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色名稱:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色狀態:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>預生效狀態:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px">
                                <span>2017/12/01</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Edit")';" value="查詢">
                <input type="button" class="cnnFormButton" onclick="javascript:;" value="清除">
                <br>
                <br>
            </td>
            <td width="1%"></td>
        </tr>
    </tbody>
</table>
<script src="@Url.Content("~/Scripts/AdmRoleUser/Index.js")"></script>
-------------------------------------------------------
//公司別列表
$(function () {
    //var urlGetCompList = $("#urlGetCompList").val();
    var urlGetCompList = $("#selCompanyType").attr('act');
    //alert(urlGetCompList);
    $.ajax({
        url: urlGetCompList,
        dataType: 'json',
        type: 'GET',
        contentType: 'application/json',
        success: function (returnData) {
            cb = "<option value=''> 請選擇 </option>";
            $.each(returnData, function (i, item) {
                cb += '<option value="' + item.COMP_ID + '">' + item.COMP_NME + '</option>';
            });
            $("#selCompanyType").append(cb);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
})
------------------------------------------------------
@{
    ViewBag.Title = "角色人員維護-編輯";
}
<style>
    /*#feedback { font-size: 1.4em; }*/
    #modifyList .ui-selecting {
        background: gray;
    }
    #modifyList .ui-selected {
        background: #3366cc;
        color: white;
    }
    #modifyList {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60%;
    }
    /*#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }*/
</style>
<table style="width:100%" border="0" cellspacing="0">
    <tbody>
        <tr>
            <td height="25" class="menu_1">
                <span class="main_title">
                    &nbsp;&nbsp;<span>@ViewBag.Title</span>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="1%"></td>
            <td width="98%" class="highLightText">
                <br>
                <input type="button" class="cnnFormButton" style="width:100px"  onclick="javascript:BtnExecute(this);" act='@Url.Action("Execute")' result='@Url.Action("RedirectToMessage", new { message = "啟動完成" })' value=" 儲存&立即啟動 ">
                <input type="button" class="cnnFormButton" onclick="javascript:BtnSave(this);" act='@Url.Action("Save")' result='@Url.Action("RedirectToMessage", new { message = "儲存完成" })' value="儲存">
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Index")';" value="取消">
                <br><br>
                <span class="desc">最後異動：2017/03/09 11:45:13 (55319)馬爹利</span>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>                    
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>生效日:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <input type="text" id="effectDate" value="2017/03/15" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>申請單號:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>UR12233341232</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>申請說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <input type="text"  style="width: 400px;"   value=" " />
                            </td>
                        </tr>                     
                    </tbody>
                </table>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="5">基本資料</td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>公司別:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>中華</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色ID:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>S001</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色名稱:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>系統管理人員</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色狀態:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>Y</span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="FormLine1" style="width: 15%; height: 23px">
                                <span>角色說明:</span>
                            </td>
                            <td class="FormLine2" style="width: 85%; height: 23px" colspan="4">
                                <span>S001 系統管理人員</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <table style="width:100%" border="0" cellpadding="3" cellspacing="0" class="datatable">
                    <tbody>
                        <tr class="tr_head">
                            <td colspan="5">功能設定</td>
                        </tr>
                        <tr>
                            <td class="FormLine2"> 部門 </td>
                            <td class="FormLine2">人員清單</td>
                            <td class="FormLine2"></td>
                            <td class="FormLine2">角色人員     &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="text" maxlength="5" id="txtNewUser" value=" " onchange="GetUser();"   />
                                @*<input type="button" id="btnAddNewRoleUser" class="cnnFormButton" value="加入" onclick="GetUser();" />*@
                            </td>
                            <td class="FormLine2">人員異動</td>
                        </tr>
                        <tr>
                            <td class="FormLine1" width="23%" style="vertical-align:top;text-align:left">                             
                                <div id="funcTree" treesrc='@Url.Action("GetFuncTree", "CommUtil", new { compId = "3", systemId= "6" })'></div>
                            </td>
                            <td class="FormLine1" width="23%" style="vertical-align:top;text-align:center;">
                                <select multiple="multiple" id='UserList' style="width:98%;height:300px">
                                    <option value="05998">05998 王小明</option>
                                    <option value="06112">07332 鍾明光</option>
                                    <option value="09135">09135 錢中</option>
                                </select>
                            </td>
                            <td class="FormLine1" width="8%" style="vertical-align:top;text-align:center">
                                <br /> <input type="button" class="cnnFormButton"  style="width:20px"  id="btnRight" value=">" /><br /><br />
                                <input type="button" class="cnnFormButton" style="width:20px"  id="btnAllRight" value=">>" /><br /><br />                             
                                <input type="button" class="cnnFormButton" style="width:20px"  id="btnLeft" value="<" /><br /><br />
                                <input type="button" class="cnnFormButton" style="width:20px"  id="btnAllLeft" value="<<" />
                            </td>
                            <td class="FormLine1" width="23%" style="vertical-align:top;text-align:center">                             
                                <select multiple="multiple" id='RoleUserList' style="width:98%;height:300px">
                                    <option value="01223">01223 陳小密</option>
                                    <option value="04123">04123 成中元</option>                                
                                </select>
                            </td>
                            <td class="FormLine1" width="23%" style="vertical-align:top;text-align:center">                                 
                                <div style="background-color:#fbfaeb;width: 96%; height: 296px; overflow: auto; margin-bottom:2px; margin-left:2px; margin-top:2px;margin-right:2px; border: 2px gray solid; ">                     
                                    <ol id="modifyList" style="margin-top: 4px; margin-left: 4px;">
                                        <li class="ui-widget-content"  id="06112">
                                            <i style='color:blue' class='fa fa-check' aria-hidden='true'></i>06112 陳大毛
                                            <input type="button" class="cnnFormButton" value="還原" onclick="addRecovery('06112 陳大毛')" />
                                        </li>
                                        <li class="ui-widget-content"   id="03123">
                                            <i style='color:red' class='fa fa-times' aria-hidden='true'></i>03123 王大明
                                            <input type="button" class="cnnFormButton" value="還原" onclick="delRecovery('03123 王大明')" />
                                        </li>
                                    </ol>
                                </div>        
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <input type="button" class="cnnFormButton" style="width:100px" onclick="javascript:BtnExecute(this);" act='@Url.Action("Execute")' result='@Url.Action("RedirectToMessage", new { message = "啟動完成" })' value=" 儲存&立即啟動 ">
                <input type="button" class="cnnFormButton" onclick="javascript:BtnSave(this);" act='@Url.Action("Save")' result='@Url.Action("RedirectToMessage", new { message = "儲存完成" })' value="儲存">
                <input type="button" class="cnnFormButton" onclick="javascript:location.href = '@Url.Action("Index")';" value="取消">
                <span id="clickTreeResult" style="color:gray"></span>
                <br>
                <br>
            </td>
            <td width="1%"></td>
        </tr>
    </tbody>
</table>
<script src="@Url.Content("~/Scripts/AdmRoleUser/Edit.js")"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
@Html.Hidden("urlGetEmployee", Url.RouteUrl("CommUtil_employee"))
------------------------------------------------------
//功能樹
$(function () {
    $("#funcTree").fancytree({
        checkbox: false,
        selectMode: 3,
        source: {
            url: $("#funcTree").attr("treesrc")
        },
        click: function (event, data) {
            $("#clickTreeResult").text(data.node.key + "/" + data.node.title);
        },
        cookieId: "funcTree",
        idPrefix: "funcTree_"
    });
});

//按鈕-儲存&立即啟動
function BtnExecute(obj) {
    $.ajax({
        url: $(obj).attr('act'),
        type: "POST",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        cache: false,
        success: function (response) {
            if (response.RESULT == "OK") {
                location.href = $(obj).attr('result');
            }
        }
    });
}

//按鈕-儲存
function BtnSave(obj) {
    $.ajax({
        url: $(obj).attr('act'),
        type: "POST",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        cache: false,
        success: function (response) {
            if (response.RESULT == "OK") {
                location.href = $(obj).attr('result');
            }
        }
    });
}

//右移
$(function () {
    $('#btnRight').click(function (e) {
        var selectedOpts = $('#UserList option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#RoleUserList').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    //全右移
    $('#btnAllRight').click(function (e) {
        var selectedOpts = $('#UserList option');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#RoleUserList').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    //左移
    $('#btnLeft').click(function (e) {
        var selectedOpts = $('#RoleUserList option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#UserList').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    //全左移
    $('#btnAllLeft').click(function (e) {
        var selectedOpts = $('#RoleUserList option');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#UserList').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
});

//生效日
$(function () {
    $("#effectDate").datepicker({
        dateFormat: "yy/mm/dd",
        dafaultDate: new Date(),
        minDate: new Date()
    });
});
//加入角色人員
$(function () {
    $("#btnAddNewRoleUser").click(function () {
        //var usr = $("#txtNewUser").val() + "&nbsp;張大天";
        //$("#RoleUserList").append("<option> "+ usr +" </option>");
    })
});

//取得人員資訊
function GetUser() {
    var strUserId = $("#txtNewUser").val();
    if (null == strUserId || "" == strUserId) {
        //$("#RoleUserList").html("");
    } else {
        var urlGetEmployee = $("#urlGetEmployee").val();
        var data = {};
        data.usrId = strUserId;
        $.ajax({
            url: urlGetEmployee,
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            cache: false,
            success: function (response) {
                //$("#lblUserNme").html(response.USR_ID + " " + response.USR_NME + " " + response.DEPT_ID + " " + response.DEPT_NME);           
                var usrIdName = response.USR_ID + " " + response.USR_NME
                $("#RoleUserList").append("<option> " + usrIdName + " </option>");
            }
        });
    }
}

$(function () {
    $("#modifyList").selectable();
});

function addRecovery(obj)
{
    var  targetText = obj.split(" ");
    $("#UserList").append('<option value="' + targetText[0] + '">' + targetText[0] + ' ' + targetText[1] + '</option>');  
    var targetValue = targetText[0];
    $("#" + targetValue).remove();
}

function delRecovery(obj) {
    var targetText = obj.split(" ");
    $("#RoleUserList").append('<option value="' + targetText[0] + '">' + targetText[0] + ' ' + targetText[1] + '</option>');
    var targetValue = targetText[0];
    $("#" + targetValue).remove();
}

------------------------------------------------------
public JsonResult FindUser(string usrId)
{
    return Json(new Employee("55319", "馬爹利", "1", 470, "系統科"));
}

public JsonResult GetCompanyList()
{
    List<Company> list = new List<Company>();
    list.Add(new Company("1","中華"));
    list.Add(new Company("3", "賓士"));
    list.Add(new Company("27", "BMW"));
    list.Add(new Company("201", "VOVO"));
    return Json(list, JsonRequestBehavior.AllowGet);
}