jquery-ui-multiselect 的使用

@model Gd.NetSign.Controllers.DTO.WsaleFundManageDTO
@{
    ViewBag.Title = "ShowDUYUN";
    //Layout = "~/Views/Masters/Frame.cshtml";
}

<script type="text/javascript">
    //注册输入控制
    regInputType();
    /************绑定验证start********************/
    $.formValidator.initConfig({ formID: "modifyForm1", theme: 'ArrowSolidBox', mode: 'SelfTip', onError: function (msg) { art.dialog({ icon: 'warning', lock: true, content: msg }); }, inIframe: true });
    //监管银行
    $("#BankId").formValidator({
        onshow: "（必填）",
        onfocus: "（必填）请选择监管银行",
        oncorrect: ""
    }).inputValidator({
        min: 1,  //开始索引
        onError: "请选择监管银行"
    });
    //监管企业
    $("#DeEnterpriseNo").formValidator({
        onshow: "（必填）",
        onfocus: "（必填）请选择开发企业",
        oncorrect: ""
    }).inputValidator({
        min: 1,  //开始索引
        onError: "请选择开发企业"
    });
    ////监管项目
    //$("#DeProjectNo").formValidator({
    //    onshow: "（必填）",
    //    onfocus: "（必填）请选择监管项目",
    //    oncorrect: ""
    //}).inputValidator({
    //    min: 1,  //开始索引
    //    onerror: "请选择监管项目"
    //});
    ////预售许可证号
    //$("#yszh").formValidator({
    //    onshow: "（必填）",
    //    onfocus: "（必填）请选择预售许可证号",
    //    oncorrect: ""
    //}).inputValidator({
    //    min: 1,  //开始索引
    //    onerror: "请选择预售许可证号"
    //});
    //预售监管账户
    $("#Account").formValidator({
        onshow: "（必填）",
        onfocus: "（必填）请选择监管账户",
        oncorrect: ""
    }).inputValidator({
        min: 1,  //开始索引
        onerror: "请选择监管账户"
    });
    //保存
    function doSave() {
        loading("正在提交数据...请等待");
        var Options = {
            url: '/Spfsz/SaveWsaleFundManage?type=' + "@Model.OperateKey",
            type: 'POST',
            beforeSubmit: PayCheck,
            //dataType: 'json',
            iframe: false,
            error: function (msg) { unloading(); },
            success: function (result) {
                if (result.Success == true) {
                    unloading();
                    art.dialog.list['addedit'].close();
                    $.Ok(result.Msg, function () {
                        loading("提交成功,正在加载...请等待");
                        $.ajax({
                            type: "post",
                            url: "/Spfsz/WsaleFundManageList?selids=" + "@Model.selIDS",
                            data: { Sqymc: $("#Sqymc").val(), Sxmmc: $("#Sxmmc").val(), Syszh: $("#Syszh").val(), SBankName: $("#SBankName").val(), SAccountNum: $("#SAccountNum").val() },
                            error: function (msg) {

                                unloading();
                            },
                            success: function (result) {

                                framePageRefresh(result, "contents");
                                unloading();
                            }
                        });
                    });

                    //window.top.art.dialog({ id: "editDialog" }).close();
                }
                else {
                    unloading();
                    if (result.Success == false) {
                        $.Warning(result.Msg);
                    }
                    else {
                        $.Error("请求超时！");
                    }
                }
            }
        };
        $('#modifyForm1').ajaxSubmit(Options);
    }
    //验证数据
    function PayCheck() {
        var result = $.formValidator.pageIsValid('1');
        if (!result) {
            unloading();
        }
        return result;
    }
    //数据组织
    var datas = function () {

    }
    //取消
    function doCancel() {
        art.dialog.list['addedit'].close();
    }
</script>

<div id="contents">
    <div class="dialog_btnContainer">
        <input type="button" style="margin-left: 2px;" class="btn" value="保存" onclick="doSave()" />
        <input type="button" class="btn" id="btn_cancel" value="取消" onclick="doCancel()" />
    </div>
    <form action="" method="post" id="modifyForm1" enctype="multipart/form-data">
        <input type="hidden" id="BName" name="BName" value="" />
        <input type="hidden" id="CName" name="CName" value="" />
        <input type="hidden" id="yszh" name="yszh" value="" />
        <input type="hidden" id="Account" name="Account" value="" />
        <input type="hidden" id="AgreementNo" name="AgreementNo" value="@(Model.WsaleFundManageModel == null ? "" : Model.WsaleFundManageModel.AgreementNo)" />
        <!--统一嵌套-->
        <div class="Agreement_div_block">
            <div class="sample_content" style="margin: 10px">
                <!--统一嵌套end-->
                <div>
                    <div class="TP_Titles">商品房预售款使用监督管理协议</div>

                    <div class="KeyNameTxt">
                        <span>甲方：</span>
                        <input type="text" readonly="readonly" id="AName" value="@(Model.WsaleFundManageModel == null ? Model.HouseManageUnity : Model.WsaleFundManageModel.AName)" name="AName" />
                    </div>
                    <div class="KeyName">
                        <span>
                            乙方：
                        </span>
                        <!--银行 -->
                        <select id="BankId" name="BankId">
                            <option value="">
                                请选择
                            </option>
                            @foreach (var item in Model.BankList)
                            {
                                if (Model.WsaleFundManageModel == null ? false : Model.WsaleFundManageModel.BankId == item.BankId)
                                {
                                    <option selected="selected" value="@item.BankId">
                                        @item.BankName
                                    </option>
                                }
                                else
                                {
                                    <option value="@item.BankId">
                                        @item.BankName
                                    </option>
                                }
                            }
                        </select>

                    </div>
                    <div class="KeyName">
                        <span>丙方：</span>
                        <!--企业 -->
                        <select id="DeEnterpriseNo" name="DeEnterpriseNo">

                            <option value="">请选择</option>

                            @foreach (var item in Model.EnterpriseList)
                            {
                                if (Model.WsaleFundManageModel == null ? false : Model.WsaleFundManageModel.DeEnterpriseNo.Trim() == item.KFSDM)
                                {
                                    <option selected="selected" value="@item.KFSDM">
                                        @item.QYMC
                                    </option>
                                }
                                else
                                {
                                    <option value="@item.KFSDM">
                                        @item.QYMC
                                    </option>
                                }
                            }

                        </select>

                    </div>
                    <!--项目及预售许可 -->
                    <div class="ProAndEN">
                        <div>
                            监管项目：
                            <select id="DeProjectNo" name="DeProjectNo">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div>
                            销售许可：
                            <select id="yszhDjno" name="yszhDjno">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>

                    <div class="StartByTxt">为保证商品房预售款的合法使用,维护购房人的合法权益，根据国家建设部《城市商品房预售管理办法》、《商品房预售款使用监督管理暂行规定》以及《黔南州预售资金监管办法指导意见》，对商品房预售款使用监督管理达成如下协议：</div>
                    <div class="PHead">
                        第一条 丙方在都匀经济开发区开发建设的商品房坐落位于<input type="text" id="Area" name="Area" readonly="readonly" />，<input type="text" id="ProjectName" name="ProjectName" readonly="readonly" />项目
                    </div>
                    <div class=" WidthAcc">
                        <input type="text" id="FoorName" name="FoorName" class="LargeInput40" readonly="readonly" />
                        幢申请办理《商品房预售许可证》时，应当到其开户银行（即乙方）开设商品房预售款监管专用帐户（账号：
                        <!--银行帐号-->
                        <select id="AccountId" name="AccountId">
                            <option value="">请选择</option>
                        </select>
                        ）。
                    </div>
                    <div class="PHead">第二条&nbsp;本协议监管的商品房预售款是指丙方将正在建设中的坐落位于<input type="text" id="Area_1" name="Area_1" readonly="readonly" />，<input type="text" id="ProjectName_1" name="ProjectName_1" readonly="readonly" />项目</div>
                    <div><input type="text" id="FoorName_1" name="FoorName_1" class="LargeInput40" readonly="readonly" />幢的商品房出售给购房人，由购房人按商品房预售合同支付的一次性付款、首付款、后续付款、按揭贷款和住房公积金贷款金额。丙方在与购房人签订《商品房买卖合同》时，须注明商品房预售款资金监管专用账户，并自愿接受甲、乙双方的监管，承担相应的法律后果。</div>
                    <div class="PHead">第三条&nbsp;丙方在与购买人签定《商品房买卖合同》之日起30日内，应持购房合同、付款收据、乙方出具的预售款存入开户银行预售资金监管专用账户的进账单（复印件、原件交验）到甲方办理商品房预售合同备案登记。若余款是通过按揭方式办理的，丙方必须告知按揭银行将购房人所贷资金直接转入预售资金专户，并凭转帐回执至甲方领取预购商品房抵押权预告登记证明。</div>
                    <div class="PHead">第四条&nbsp;丙方在乙方开设的账户（账号：<input type="text" id="Account_1" name="Account_1" readonly="readonly" />）的商品房预售款只能用于<input type="text" id="ProjectName_2" name="ProjectName_2" readonly="readonly" />项目</div>
                    <div><input type="text" id="FoorName_2" name="FoorName_2" class="LargeInput40" readonly="readonly" />幢商品房的建设，不得挪作他用。</div>
                    <div class="PHead">第五条&nbsp;丙方使用商品房预售款，应填报《商品房预售款使用核拨表》并提供相关材料，由施工单位及项目监理公司证明其施工进度并盖章后交甲方，甲方作监管备案。</div>
                    <div class="PHead">第六条&nbsp;甲方监管备案并盖章后，丙方持《商品房预售款使用核拨表》到乙方办理核拨使用商品房预售款手续。</div>
                    <div class="PHead">第七条&nbsp;乙方应严格按照《商品房预售款使用核拨表》核定的用款金额、收款单位户名及账号拨付商品房预售款。</div>
                    <div class="PHead">第八条&nbsp;&nbsp;乙方在核拨丙方使用商品房预售款时，应严格按照中国人民银行资金监管的相关规定进行资金监管，甲、乙、丙三方应定期对项目预售资金拨付情况进行核对。</div>
                    <div class="PHead">第九条&nbsp;&nbsp;丙方违规使用商品房预售款的，甲方根据《城市商品房预售管理办法》第十四条规定予以处罚；给购房人造成经济损失的，丙方应承担相应的法律责任。</div>
                    <div class="PHead">第十条&nbsp;乙方违反本协议，未按本协议规定拨付商品预售款，甲方可暂停乙方商品房预售款的监管资格。由此给购房人造成的经济损失，乙方应承担相应的民事赔偿责任。</div>
                    <div class="PHead">第十一条&nbsp;甲方及其工作人员在行使商品房预售款监督管理职责时玩忽职守、徇私舞弊、贪污受贿、滥用职权的，由其所在单位或者上级主管机关给予行政处分；构成犯罪、贪污的追究刑事责任。</div>
                    <div class="PHead">第十二条&nbsp;&nbsp;丙方在商品房竣工并办理商品房初始登记后，本协议自行解除。</div>
                    <div class="PHead">第十三条&nbsp;本协议未尽事宜，三方可另行协商，签订补充协议，补充协议与本协议具有同等法律效力。</div>
                    <div class="PHead">第十四条&nbsp;&nbsp;本协议经甲、乙、丙三方签字、盖章后生效。</div>
                    <div class="PHead">第十五条&nbsp;本协议一式三份，甲、乙、丙方各执一份。</div>

                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function () {

    });
    //初始化（开发企业）
    $("#DeEnterpriseNo").multiselect({
        multiple: false,
        height: "120px",
        minWidth: "auto",
        header: true,
        selectedList: 1,
        selectedText: function (numChecked, numTotal, checkedItems) {
            if (checkedItems[0].value != "") {
                getJGItemByEnSelect(checkedItems[0].value);
                getBankAccByAllSelect();
                $("#CName").val($(checkedItems[0]).next().html());
                Clear_Select("Pro");//清理
                initSelectByEN("Pro");//初始化
            }
            else {
                $("#CName").val("");
                Clear_Select();//清理
                initSelectByEN();//初始化
            }

            InitInput();
            return $(checkedItems[0]).next().html();
        }

    }).multiselectfilter({
        label: "筛选",
        placeholder: "请输入",
        width: 300
    });
    //初始化（银行）
    $("#BankId").multiselect({
        multiple: false,
        height: "120px",
        minWidth: "auto",
        header: true,
        selectedList: 1,
        selectedText: function (numChecked, numTotal, checkedItems) {
            if (checkedItems[0].value != "") {
                getBankAccByAllSelect();
                //$("#Zjjgjg").val($(checkedItems[0]).next().html());
                $("#BName").val($(checkedItems[0]).next().html());
            }
            else {
                $("#BName").val("");
                //$("#Zjjgjg").val("");
            }

            return $(checkedItems[0]).next().html();
        }
    }).multiselectfilter({
        label: "筛选",
        placeholder: "请输入",
        width: 300
    });

    //初始化。
    function initSelectByEN(model1, model2) {
        loading("正在努力加载数据,请稍等...");
        if (model1 == "Wsale" || model2 == "Wsale") { } else {
            $("#yszhDjno").multiselect({
                multiple: false,
                height: "120px",
                minWidth: "auto",
                header: true,
                selectedList: 1,
                selectedText: function (numChecked, numTotal, checkedItems) {
                    if (checkedItems[0].value != "") {
                        $("#yszh").val($(checkedItems[0]).next().html());
                        //getBankAccByAllSelect();
                    }
                    else {
                        $("#yszh").val("");
                    }
                }

            }).multiselectfilter({
                label: "筛选",
                placeholder: "请输入",
                width: 100
            });
        }
        if (model1 == "Pro" || model2 == "Pro") { } else {
            //初始化监管项目
            $("#DeProjectNo").multiselect({
                multiple: false,
                height: "120px",
                minWidth: "auto",
                header: true,
                selectedList: 1,
                selectedText: function (numChecked, numTotal, checkedItems) {
                    var name_Pro = "";
                    if (checkedItems[0].value != "") {
                        name_Pro = $(checkedItems[0]).next().html();
                        $("#ProjectName").val(name_Pro);
                        $("#ProjectName_1").val(name_Pro);
                        $("#ProjectName_2").val(name_Pro);
                        //getPermittemByDeProjectNo(checkedItems[0].value);
                        //getBankAccByAllSelect();
                    }
                    else {
                        $("#ProjectName").val(name_Pro);
                        $("#ProjectName_1").val(name_Pro);
                        $("#ProjectName_2").val(name_Pro);

                    }
                    return $(checkedItems[0]).next().html();
                }
            }).multiselectfilter({
                label: "筛选",
                placeholder: "请输入",
                width: 100
            });
        }
        if (model1 == "Acc" || model2 == "Acc") { } else {
            //初始化监管账户
            $("#AccountId").multiselect({
                multiple: false,
                height: "120px",
                minWidth: "auto",
                header: true,
                selectedList: 1,
                selectedText: function (numChecked, numTotal, checkedItems) {
                    if (checkedItems[0].value != "") {
                        $("#Account_1").val($(checkedItems[0]).next().html());
                        $("#Account").val($(checkedItems[0]).next().html());
                    }
                    else {
                        $("#Account_1").val("");
                        $("#Account").val("");
                    }

                    return $(checkedItems[0]).next().html();
                }

            }).multiselectfilter({
                label: "筛选",
                placeholder: "请输入",
                width: 100
            });
        }
        unloading();
    }

    function InitInput() {
        $("#Account_1").val("");
        $("#Area").val("");
        $("#Area_1").val("");
        $("#ProjectName").val("");
        $("#ProjectName_1").val("");
        $("#ProjectName_2").val("");
        $("#FoorName").val("");
        $("#FoorName_1").val("");
        $("#FoorName_2").val("");
    }
    function Clear_Select(model1, model2) {
        if (model1 == "Wsale" || model2 == "Wsale") { } else {
            $("#yszhDjno").html("");
            //清空关联预售许可
            $("#yszhDjno").append("<option value=''>请选择</option>");
        }
        if (model1 == "Pro" || model2 == "Pro") { } else {
            $("#DeProjectNo").html("");
            //清空监管项目
            $("#DeProjectNo").append("<option value=''>请选择</option>");
        }
        if (model1 == "Acc" || model2 == "Acc") { } else {
            $("#AccountId").html("");
            //清空监管账户
            $("#AccountId").append("<option value=''>请选择</option>");
        }
    }

    //初始化选择
    $("#Zyjjfs").multiselect({
        multiple: false,
        height: "60px",
        minWidth: "auto",
        header: false,
        selectedList: 1,
        selectedText: function (numChecked, numTotal, checkedItems) {

            return $(checkedItems[0]).next().html();
        }

    });
    //根据企业获取监管项目
    function getJGItemByEnSelect(EnSelectId) {
        var Dates = new Date().getMinutes();
        $.ajax({
            type: "get",
            url: "/Spfsz/GetProjectByEnterprise?kfsdm=" + EnSelectId + "&times=" + Dates.toString(),
            //data: { townCode: townId },
            success: function (result) {
                if (result.Success == true) {
                    $("#Jfzzdj").val(result.Source.Code);
                    $("#Zzzsh").val(result.Source.QYZZ);
                    $("#DeProjectNo").html("");
                    //关联绑定项目
                    $("#DeProjectNo").append("<option value=''>请选择</option>");
                    $(result.Source.List).each(function () {
                        if (this.xmdm == "@(Model.WsaleFundManageModel == null ?"0": Model.WsaleFundManageModel.DeProjectNo)") {
                            $("#DeProjectNo").append("<option selected=\"selected\" value='" + this.xmdm + "'>" + this.xmmc + "</option>");
                        }
                        else {
                            $("#DeProjectNo").append("<option value='" + this.xmdm + "'>" + this.xmmc + "</option>");
                        }

                    });
                    //初始化监管项目下拉框
                    $("#DeProjectNo").multiselect({
                        multiple: false,
                        height: "120px",
                        minWidth: "auto",
                        header: true,
                        selectedList: 1,
                        selectedText: function (numChecked, numTotal, checkedItems) {
                            var name_Pro = "";
                            if (checkedItems[0].value != "") {
                                name_Pro = $(checkedItems[0]).next().html();
                                getPermittemByDeProjectNo(checkedItems[0].value);
                                getBankAccByAllSelect();
                                Clear_Select("Pro", "Wsale");//清理
                                initSelectByEN("Pro", "Wsale");//初始化
                            }
                            else {
                                Clear_Select("Pro");//清理
                                initSelectByEN("Pro");//初始化
                                InitInput();
                            }
                            $("#ProjectName").val(name_Pro);
                            $("#ProjectName_1").val(name_Pro);
                            $("#ProjectName_2").val(name_Pro);
                            return $(checkedItems[0]).next().html();
                        }

                    }).multiselectfilter({
                        label: "筛选",
                        placeholder: "请输入",
                        width: 100
                    });

                }
                else if (result.Success == false) {
                    $.Error("获取项目数据失败");
                }
            },
            error: function (result) {

                $.Error("错误：获取项目数据失败");
            }
        });
    }

    //根据项目获取预售许可
    function getPermittemByDeProjectNo(DeProjectNoId) {
        var Dates = new Date().getMinutes();
        $.ajax({
            type: "get",
            url: "/Spfsz/GetPermissionByProject?xmdm=" + DeProjectNoId + "&times=" + Dates.toString(),
            //data: { townCode: townId },
            success: function (result) {
                if (result.Success == true) {
                    $("#Area").val(result.Source.Code);
                    $("#Area_1").val(result.Source.Code);
                    $("#FoorName").val(result.Source.FoorName);
                    $("#FoorName_1").val(result.Source.FoorName);
                    $("#FoorName_2").val(result.Source.FoorName);
                    $("#yszhDjno").html("");
                    //关联预售许可
                    $("#yszhDjno").append("<option value=''>请选择</option>");
                    $(result.Source.List).each(function () {
                        if (this.Djno == "@(Model.WsaleFundManageModel == null ? 0 : Model.WsaleFundManageModel.yszhDjno)") {
                            $("#yszhDjno").append("<option selected=\"selected\" value='" + this.Djno + "'>" + this.Yszh + "</option>");
                        }
                        else {
                            $("#yszhDjno").append("<option value='" + this.Djno + "'>" + this.Yszh + "</option>");
                        }

                    });
                    //初始化预售许可下拉框
                    $("#yszhDjno").multiselect({
                        multiple: false,
                        height: "120px",
                        minWidth: "auto",
                        header: true,
                        selectedList: 1,
                        selectedText: function (numChecked, numTotal, checkedItems) {
                            var name_Wsale = "";
                            if (checkedItems[0].value != "") {
                                name_Wsale = $(checkedItems[0]).next().html();
                                getBankAccByAllSelect();
                            }
                            $("#yszh").val(name_Wsale);

                            return $(checkedItems[0]).next().html();
                        }
                    }).multiselectfilter({
                        label: "筛选",
                        placeholder: "请输入",
                        width: 100
                    });
                }
                else if (result.Success == false) {
                    $.Error("获取项目数据失败");
                }
            },
            error: function (result) {
                $.Error("错误：获取项目数据失败");
            }
        });
    }
    //获取监管账户
    function getBankAccByAllSelect() {
        var xmdm = $("#DeProjectNo").val();
        var kfsdm = $("#DeEnterpriseNo").val();
        var bankid = $("#BankId").val();
        var permit = $("#yszhDjno").val();
        var Dates = new Date().getMinutes();
        var Urls = "/Spfsz/GetAccByPermission?times=" + Dates.toString();
        if (xmdm != "" && permit != "") {
            Urls += "&kfsdm=" + kfsdm + "&bankid=" + bankid + "&xmdm=" + xmdm;
            Urls += "&permit=" + permit;
            Urls += "&AgreementNo=" + "@(Model.WsaleFundManageModel == null ? "" : Model.WsaleFundManageModel.AgreementNo)"
            loading("正在努力加载数据,请稍等...");
            $.ajax({
                type: "get",
                url: Urls,
                //data: { townCode: townId },
                success: function (result) {
                    if (result.Success == true) {

                        $("#AccountId").html("");
                        $("#AccountId").append("<option value=''>请选择</option>");
                        $(result.Source.List).each(function () {
                            if (this.AccountId == "@(Model.WsaleFundManageModel == null ? "0" : Model.WsaleFundManageModel.AccountId)") {
                                $("#AccountId").append("<option selected=\"selected\" value='" + this.AccountId + "'>" + this.AccountNum + "</option>");
                            }
                            else {
                                $("#AccountId").append("<option value='" + this.AccountId + "'>" + this.AccountNum + "</option>");
                            }

                        });
                        //初始化监管账户可下拉框
                        $("#AccountId").multiselect({
                            multiple: false,
                            height: "120px",
                            minWidth: "auto",
                            header: true,
                            selectedList: 1,
                            selectedText: function (numChecked, numTotal, checkedItems) {
                                if (checkedItems[0].value != "") {
                                    $("#Account_1").val($(checkedItems[0]).next().html());
                                    $("#Account").val($(checkedItems[0]).next().html());

                                }
                                else {
                                    $("#Account_1").val("");
                                    $("#Account").val("");
                                }

                                return $(checkedItems[0]).next().html();
                            }
                        }).multiselectfilter({
                            label: "筛选",
                            placeholder: "请输入",
                            width: 100
                        });
                        unloading();
                    }
                    else {
                        unloading();
                        $.Error("获取监管账户数据失败");
                    }
                },
                error: function (result) {
                    unloading();
                    $.Error("错误：获取监管账户数据失败");
                }
            });
        }
    }
</script>