首先说明一下，本人是在公司先接触使用的layui，一个功能需求下来之后是能够完成的，但是在使用过程中对layui没有一个整体的理解，遇到问题不能灵活的变通。趁着假期对layui来一个整体的梳理与理解，有不对的地方希望能指正。同时在理解的时候也上网搜了很多博文，遇到一些好的，在文章中都会记录下来，并给出链接。 参考layui官网(https://www.layui.com/doc/base/infrastructure.html)
1.非模块化和模块化的区别是（参考博文：https://www.cnblogs.com/qlqwjy/p/8975931.html）
- 非模块化使用时加载相应的模块。不用每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.all.js
- 模块化一次性加载所有的模块。必须每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.js (推荐这种，但是写起来不太方便)
2.渲染常用的方法：
有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif） 但没有关系，你只需要执行 form.render(type, filter); 方法即可,详细的使用请查看 https://www.layui.com/doc/modules/form.html#render
table中我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。详细的使用请查看 https://www.layui.com/doc/modules/table.html#methodRender
3. 事件监听：
form模块在 layui 事件机制中注册了专属事件
默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：<select lay-filter="test"></select>
form.on('select(test)', function(data){console.log(data)})
4. 在工作中使用到的实例解析：
HTML前台展示用例
统一模板中使用的是模块化的layui的js <script src="/Scripts/plugins/layer/laydate/laydate.js"></script> <script src="/Scripts/plugins/layer/layer.min.js"></script> <script src="/plugins/layer/layer.ext.js"></script> <script> layui.config({ base: '/Scripts/' }).extend({ formSelects: 'formSelects-v4' }); </script> ------子页面中的使用 @{ Layout = "/Views/Shared/_NewIframeLayout.cshtml"; ViewBag.Title = "银企自动付款配置列表"; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>调整返利数据</title> <style> .formContainer .formItem .layui-input { width: 100px; } </style> </head> <body> <div class="newNav-fadeIn-wrapper"> <div class="title">银企自动付款配置列表</div> <hr class="layui-bg-gray"> <div> <form class="layui-form formContainer"> <div class="formItem"> <label>费用所属公司:</label> <div> @Html.DropDownList("ReceiveOrgId", new SelectList(ViewBag.CompanyInfo as System.Collections.IEnumerable, "ReceiveOrgId", "ReceiveOrgName"), "-请选择-") </div> </div> <div class="formItem"> <label>单据类型:</label> <div> <input type="text" name=" bizType" class="layui-input"> </div> </div> <div class="formItem"> <label>银行账号:</label> <div> <input type="text" name="payBankaccountNo" class="layui-input"> </div> </div> <div class="formItem"> <label>自动推送:</label> <div> <select name="isAllowSubmit" class="selectopts input-text"> <option value="" selected="selected">-请选择- </option> <option value="true">是 </option> <option value="false">否 </option> </select> </div> </div> <div class="formItem"> <label>自动付款:</label> <div> <select name="isAllowPay" class="selectopts input-text"> <option value="" selected="selected">-请选择- </option> <option value="True">是 </option> <option value="False">否</option> </select> </div> </div> <div class="formItem"> <label>状态:</label> <div> <select name="isEnable" class="selectopts input-text"> <option value="" selected="selected">-请选择- </option> <option value="True">启用 </option> <option value="False">未启用</option> </select> </div> </div> <div class="formItem"> <button class="layui-btn" id="searchBtn">查找</button> <button class="layui-btn" id="addBtn">新增</button> <button class="layui-btn" id="addImportBtn">导入</button> <button class="layui-btn" id="addExportBtn">导出导入模板</button> </div> <div class="formItem"> <label>自动推送:</label> <button class="layui-btn layui-btn-normal" id="autoSubmitOpen">打开</button> <button class="layui-btn layui-btn-warm" id="autoSubmitClose">关闭</button> </div> <div class="formItem"> <label>自动付款:</label> <button class="layui-btn layui-btn-normal" id="autoPayOpen">打开</button> <button class="layui-btn layui-btn-warm" id="autoPayClose">关闭</button> </div> </form> <div> <table id="dataTable"></table> </div> ---------编辑界面有个layui的4级联动的功能 <div id="editArea" style="display: none; padding: 10px"> <form class="layui-form" action=""> <input type="text" class="layui-input" id="PKID" style="display: none;" /> <div class="formItemVertical"> <label class="layui-form-label"><span style="color: red">*</span>单据类型：</label> <div class="layui-input-block"> <select id="editBizType" name="editBizType" lay-filter="editBizType"> <option value="">--请选择--</option> <option value="用款申请单">用款申请单</option> <option value="差旅报销单">差旅报销单</option> </select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label"><span style="color: red">*</span>费用所属公司：</label> <div class="layui-input-block"> <select id="ReceiveOrg" name="ReceiveOrg" lay-filter="ReceiveOrg"></select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label"><span style="color: red">*</span>开户银行：</label> <div class="layui-input-block"> <select id="Bank" name="Bank" lay-filter="Bank"><option value="">--请选择--</option></select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label"><span style="color: red">*</span>银行账号：</label> <div class="layui-input-block"> <select id="Account" name="Account" lay-filter="Account"><option value="">--请选择--</option></select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label"><span style="color: red">*</span>付款公司：</label> <div class="layui-input-block"> <input type="text" id="PayBankName" name="PayBankName" class="layui-input" readonly> </div> </div> <div class="formItemVertical"> <label class="layui-form-label">自动推送：</label> <div class="layui-input-block"> <select id="AutoSubmit" name="AutoSubmit"> <option value="false">否</option> <option value="true">是</option> </select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label">自动付款：</label> <div class="layui-input-block"> <select id="AutoPay" name="AutoPay"> <option value="false">否</option> <option value="true">是</option> </select> </div> </div> <div class="formItemVertical"> <label class="layui-form-label">备注：</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="SpecialRemark" name="SpecialRemark" /> </div> </div> </form> </div> ----文件上传功能 <div id="importExcel" style="display: none; padding: 30px 30px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <input type="text" id="fileName" class="form-control" /> <a id="selectFile" class="input-group-addon" onclick="openFile()">选择文件</a> </div> </form> <input style="display: none" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="_selectFile" onchange="changeFile(this)" /> </div> </div> </div> ---PayCompanyInfo.js 中为封装的银行配置子项 <script src="~/Scripts/PayBankInfo/PayCompanyInfo.js"></script> <script> //定义全局table变量 var dataTable = null; //编辑中组织下拉框的内容，属于 GetCompanyInfo("XXX", "1"); //模块化使用 layui layui.use(['form', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () { //绑定日期控件 document.querySelectorAll('.dateSelect').forEach(e => layui.laydate.render({ elem: e })); //生成table表数据 dataTable = renderTable(getTableParam()); //绑定按钮搜索事件 bindSearchEvent(dataTable); //绑定下拉框事件 bindSelectChange(layui.form); }); //渲染table的参数设置：https://www.layui.com/doc/modules/table.html 基础参数一览表 function getTableParam() { return { url: '/PurchaseOrder/XXX', // 异步数据接口 接口返回的数据格式并不一定都符合 table 默认规定的格式，需要用 parseData来装换成需要的参数格式 parseData: r => { return { code: 0, count: r.data.total, data: r.data.list } }, loading: true, //翻页加loading // cols - 表头参数一览表 //templet 自定义模板 cols: [[ { type: 'checkbox' }, { field: 'pkid', title: 'pkid' }, { field: 'companyName', title: '费用所属公司' }, { field: 'bizType', title: '单据类型' }, { field: 'payBankaccountNo', title: '账号' }, { field: 'payBankName', title: '开户行' }, { field: 'payCompanyName', title: '付款公司' }, { field: 'allowSubmit', title: '自动推送', templet: function (d) { if (d.allowSubmit) { return "是"; } else { return "否"; } } }, { field: 'enable', title: '状态', templet: function (d) { if (d.enable) { return "启用"; } else { return "未启用"; } } }, { field: 'allowPay', title: '自动付款', templet: function (d) { if (d.allowPay) { return "是"; } else { return "否"; } } }, { field: 'createTime', title: '创建时间', templet: function (d) { return _.dateFormat(new Date(d.createTime)) } }, { field: 'createdBy', title: '创建人' }, { field: 'lastUpdateTime', title: '最后更新时间', templet: function (d) { return _.dateFormat(new Date(d.lastUpdateTime)) } }, { field: '操作', title: '操作', templet: function (d) { var alink = "<a style='cursor: pointer; color: blue' onclick="AuditBankDirectAutoPay('" + d.pkid + "')" style='cursor:pointer''>编辑</a>"; alink += ' <a style="cursor: pointer;color:red" onclick="DeleteBankDirectAuto(' + d.pkid + ')">删除</a>'; if (!d.enable) { alink += ' <a style="cursor: pointer;color:red" onclick="AuditBankDirectStatus(' + d.pkid + ')">审核</a>'; } return alink; } }, ]], where: { TransType: 'RECHARGE' } } } //生成表格的渲染方法 function renderTable(param) { var p = { elem: '#dataTable', page: true, style: 'line', size: 'sm', id: 'pkid' }; // 将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign Object.assign(p, param); return layui.table.render(p); } //重载表格 function reloadTable(table, param) { var p = Object.assign({ page: { curr: 1 } }, param); var where = { TransType: 'RECHARGE' }; var form = $('.formContainer').serializeArray(); for (var kv of form) { if (!where[kv.name]) { where[kv.name] = kv.value; } } p.where = Object.assign(where, p.where) table.reload(p); } //按钮绑定事件 function bindSearchEvent(table) { $('#searchBtn').click(function (e) { reloadTable(table); e.preventDefault(); //阻止原来的提交表单操作 }) $("#addBtn").click(function (e) { AddBankDirectAutoPay(); e.preventDefault(); //阻止原来的提交表单操作 }); $("#autoSubmitOpen").click(function (e) { BankDirectAutoOptionSetting("批量自动推送打开", true, null); e.preventDefault(); //阻止原来的提交表单操作 }); $("#autoSubmitClose").click(function (e) { BankDirectAutoOptionSetting("批量自动推送关闭", false, null); e.preventDefault(); //阻止原来的提交表单操作 }); $("#autoPayOpen").click(function (e) { BankDirectAutoOptionSetting("批量自动付款打开", null,true); e.preventDefault(); //阻止原来的提交表单操作 }); $("#autoPayClose").click(function (e) { BankDirectAutoOptionSetting("批量自动付款关闭", null, false); e.preventDefault(); //阻止原来的提交表单操作 }); //导入配置信息 $("#addImportBtn").click(function (e){ ImportBankDirectAutoSetting(); e.preventDefault(); }); //导出导入模板 $("#addExportBtn").click(function (e) { ExportImportBankDirectTemplate(); e.preventDefault(); }); } //select变化之后的监听事件 function bindSelectChange(form) { form.on('select(editBizType)', function (data) { //console.log(data.value); //if (data.value == "差旅报销单") { // //简单赋值与操作 // //$("#ReceiveOrg").val("1004"); // //GetBankInfo("1"); // //$("#Bank").val("3"); // //GetAccountInfo("1"); // //layui.form.render('select'); //} }); //form.on 为事件监听事件，发现下拉框有变动的话，就进行联动的下级select元素中的值变动，修改变动之后的from表单元素要进行重新的渲染 form.on('select(ReceiveOrg)', function (data) { GetBankInfo("1"); form.render('select'); }); form.on('select(Bank)', function (data) { GetAccountInfo("1"); form.render('select'); }); form.on('select(Account)', function (data) { GetPayAccountName(); form.render('select'); }); } //新增 function AddBankDirectAutoPay() { var load = layer.load(); $.ajax({ type: 'post', url: '/PurchaseOrder/XXX', success: function (data) { //弹出层 var index1 = layer.open({ type: 1, title: '银企自动付款编辑', content: $('#editArea'), area: ['500px', '450px'], btn: ['确认', '取消'], success: function () { $("#PKID").val('0') $("#editBizType").val(''); $("#ReceiveOrg").val('1001'); GetBankInfo("1"); $("#Bank").val(''); GetAccountInfo("1"); $("#Account").val(''); $("#AutoSubmit").val('false'); $("#AutoPay").val('false'); $("#SpecialRemark").val(''); $("#PayBankName").val(''); //对新增弹框中form表单赋初值，同时重新进行渲染操作 layui.form.render(); //对form表单中的额所有下拉列表进行重新的渲染 // layui.form.render('select'); }, yes: function () { var resultbool = BankDirectAutoPaySubmit(); if (resultbool) { layer.closeAll(); }; }, btn2: function () { layer.close(index1); } }); }, error: function (jqXhr, textStatus, errorThrown) { layer.msg("服务器出错！" + errorThrown, { icon: 5 }); layer.close(load); } }); } //修改 function AuditBankDirectAutoPay(pkid) { var load = layer.load(); $.ajax({ type: 'post', url: '/PurchaseOrder/XXX', data: { pkid: pkid }, success: function (data) { layer.close(load); var index1 = layer.open({ type: 1, title: '银企自动付款编辑', content: $('#editArea'), area: ['500px', '450px'], btn: ['确认', '取消'], success: function () { $("#PKID").val(data.PKID); $("#editBizType").val(data.BizType); $("#ReceiveOrg").val(data.Companyid); //三级联动的效果 GetBankInfo("1"); $("#Bank").val(data.Bankid); GetAccountInfo("1"); $("#Account").val(data.Accountid); $("#AutoSubmit").val(data.AutoSubmit.toString()); $("#AutoPay").val(data.AutoPay.toString()); $("#SpecialRemark").val(data.Remark); $("#PayBankName").val(data.PayCompanyName); layui.form.render(); layui.form.render('select'); }, yes: function () { var resultbool = BankDirectAutoPaySubmit(); if (resultbool) { layer.closeAll(); }; }, btn2: function () { layer.close(index1); } }); }, error: function (jqXhr, textStatus, errorThrown) { layer.msg("服务器出错！" + errorThrown, { icon: 5 }); layer.close(load); } }); } //确认要增加或者修改配置文件中的信息 function BankDirectAutoPaySubmit() { var loadIndex = layer.load(); var pkid = $("#PKID").val(); var bizType = $("#editBizType").val(); var companyid = $("#ReceiveOrg").val(); var companyname = $("#ReceiveOrg").find("option:selected").text(); var bankid = $("#Bank").val(); var bankname = $("#Bank").find("option:selected").text(); var accountid = $("#Account").val(); var accountdata = $("#Account").find("option:selected").text(); var specialRemark = $("#SpecialRemark").val().trim(); var autoSubmit = $("#AutoSubmit").val(); var autoPay = $("#AutoPay").val(); var payCompanyName = $("#PayBankName").val(); if (specialRemark.length > 120) { layer.close(loadIndex); layer.msg("特殊说明不能超过120字！", { icon: 5 }); return false; } if (bizType == "") { layer.close(loadIndex); layer.msg("请选择单据类型！", { icon: 5 }); return false; } if (payCompanyName == "") { layer.close(loadIndex); layer.msg("付款公司不能为空！", { icon: 5 }); return false; } if (companyid === "" || bankid === "" || accountid === "") { layer.close(loadIndex); if (companyid === "") { layer.msg("请选择付款组织！", { icon: 5 }); } if (bankid === "") { layer.msg("请选择付款银行！", { icon: 5 }); } if (accountid === "") { layer.msg("请选择付款银行账号！", { icom: 5 }); } return false; } else { var load1 = layer.load(); $.ajax({ type: 'post', async: true, data: { "pkid": pkid, "bizType": bizType, "companyname": companyname, "companyid": companyid, "bankid": bankid, "bankname": bankname, "accountid": accountid, "accountdata": accountdata, "Remark": specialRemark, "autoSubmit": autoSubmit, "autoPay": autoPay, "payCompanyName": payCompanyName }, url: '/PurchaseOrder/XXX', success: function (result) { if (result.Success) { layer.msg("操作成功", { icon: 6 }); layer.closeAll(); } else { layer.msg("操作失败！" + result.Result, { icon: 5 }); } layer.close(loadIndex); reloadTable(dataTable); layer.close(load1); }, error: function (jqXhr, textStatus, errorThrown) { layer.close(loadIndex); layer.msg("操作失败：" + errorThrown, { icon: 6 }); layer.close(load1); } }); return true; } } //删除操作 function DeleteBankDirectAuto(pkid) { layer.confirm('确认要删除吗？', function (i) { $.ajax({ type: 'post', data: { "pkid": pkid }, url: '/PurchaseOrder/XXX', success: function (result) { if (result.Success) { layer.msg("删除成功！"); } else { layer.msg("删除失败！" + result.Message); } layer.close(i); reloadTable(dataTable); }, error: function (jqXhr, textStatus, errorThrown) { layer.msg("删除失败！" + errorThrown); } }); }); } //批量进行打开与关闭操作 function BankDirectAutoOptionSetting(text,autoSubmit, autoPay) { layer.confirm(text+'确定进行批量操作？', function (i) { //批量操作 var checkIDs = layui.table.checkStatus('pkid') //idTest 即为基础参数 id 对应的值 var pkidstr = ''; var data = checkIDs.data; if (data.length == 0) { layer.msg('请选择数据！', { icon: 5 }); return false; } else { for (var i = 0; i < data.length; i++) { pkidstr += data[i].pkid + ','; } } $.ajax({ type: 'post', data: { "pkidstr": pkidstr, "autoSubmit": autoSubmit, "autoPay": autoPay }, url: '/PurchaseOrder/XXX', success: function (result) { if (result.Success === true) { layer.msg(text+"批量操作成功！"); } else { layer.msg(text+"批量操作失败！" + result.Message); } layer.close(i); reloadTable(dataTable); }, error: function (jqXhr, textStatus, errorThrown) { layer.msg(text+"批量操作失败！" + errorThrown); } }); }); } //导入配置信息 function ImportBankDirectAutoSetting() { var create = layer.open({ type: 1, title: '导入银企自动付款配置', skin: 'layui-layer-rim', //加上边框 area: ['400px', '200px'], //宽高 content: $('#importExcel'), btn: ['确认', '取消'], yes: function (i, e) { //遮罩层 var mask = _.showMask(); var form = new FormData(); var file = $('#_selectFile')[0].files[0]; if (!file) layer.msg("文件不能为空"); form.append('file', file); $.ajax({ url: '/PurchaseOrder/XXX', data: form, method: 'POST', contentType: false, processData: false, success: function (r) { if (r.error) { layer.msg("导入失败！" + r.message); } else { layer.msg("导入成功！"); } mask.close(); layer.close(create); reloadTable(dataTable); }, error: function () { close(); layer.msg('网络错误'); } }); }, btn2: function () { layer.close(create); } }); } //导出导入模板 function ExportImportBankDirectTemplate() { window.location.href = '/ExexlModel/银企自动付款配置导入模板.xlsx'; } // 选择文件事件 function openFile() { $('#_selectFile').click(); }; //显示上传的文件名 function changeFile(target) { if (target.files[0]) { $('#fileName').val(target.files[0].name); } }; //更新审核状态 function AuditBankDirectStatus(pkid) { layer.confirm('确认要审核通过吗？', function (i) { $.ajax({ type: 'post', data: { "pkid": pkid }, url: '/PurchaseOrder/XXX', success: function (result) { if (result.Success) { layer.msg("审核通过！"); } else { layer.msg("审核失败！" + result.Message); } layer.close(i); reloadTable(dataTable); }, error: function (jqXhr, textStatus, errorThrown) { layer.msg("审核失败！" + errorThrown); } }); }); } </script> </body> </html>
4级联动的内嵌JS代码
----生成 //初始化企业信息 function GetCompanyInfo(companyName, isBankDirect) { $.ajaxSettings.async = false; //得到企业下拉列表 $.getJSON('/PurchaseOrder/XXXX', function (receiveorgs) { var sb = '<option value="">--请选择--</option>'; for (var index = 0; index < receiveorgs.ReceiveOrg.length; index++) { var receiveorg = receiveorgs.ReceiveOrg[index]; if (receiveorg.ReceiveOrgName == companyName) { sb += '<option selected="selected" value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>'; } else { sb += '<option value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>'; } } $("#ReceiveOrg").html(sb); }); GetBankInfo(isBankDirect); GetAccountInfo(isBankDirect); } //初始化企业信息 function GetAllCompanyInfo(companyName, isBankDirect) { $.ajaxSettings.async = false; //得到企业下拉列表 $.getJSON('/PurchaseOrder/XXX', function (receiveorgs) { var sb = '<option value="">--请选择--</option>'; for (var index = 0; index < receiveorgs.ReceiveOrg.length; index++) { var receiveorg = receiveorgs.ReceiveOrg[index]; if (receiveorg.ReceiveOrgName == companyName) { sb += '<option selected="selected" value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>'; } else { sb += '<option value="' + receiveorg.ReceiveOrgId + '">' + receiveorg.ReceiveOrgName + '</option>'; } } $("#ReceiveOrg").html(sb); }); GetAllBankInfo(isBankDirect); GetAccountInfo(isBankDirect); } //银行信息 function GetBankInfo(isBankDirect) { var companyId = $("#ReceiveOrg").val(); var bankname = ""; xSettings.async = false; //得到关联银行信息 $.getJSON('/PurchaseOrder/XXX?CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (banks) { var sb = '<option value="">--请选择--</option>'; for (var index = 0; index < banks.Bank.length; index++) { var bank = banks.Bank[index]; if (bank.BankName == bankname) { sb += '<option selected="selected" value="' + bank.BankId + '">' + bank.BankName + '</option>'; } else { sb += '<option value="' + bank.BankId + '">' + bank.BankName + '</option>'; } } $("#Bank").html(sb); }); GetAccountInfo(); } //银行+其他货币资金信息 function GetAllBankInfo(isBankDirect) { var companyId = $("#ReceiveOrg").val(); var bankname = ""; $("#Bank").html(""); $.ajaxSettings.async = false; //得到关联银行信息 $.getJSON('/PurchaseOrder/XXX?CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (banks) { var sb = '<option value="">--请选择--</option>'; for (var index = 0; index < banks.Bank.length; index++) { var bank = banks.Bank[index]; if (bank.BankName == bankname) { sb += '<option selected="selected" value="' + bank.BankId + '">' + bank.BankName + '</option>'; } else { sb += '<option value="' + bank.BankId + '">' + bank.BankName + '</option>'; } } $("#Bank").html(sb); }); GetAccountInfo(); } //银行账号信息 function GetAccountInfo(isBankDirect) { var BankId = $("#Bank").val(); var companyId = $("#ReceiveOrg").val(); var account = ""; $.ajaxSettings.async = false; $.getJSON('/PurchaseOrder/XXX?BankId=' + BankId + '&&CompanyId=' + companyId + "&&IsBankDirect=" + isBankDirect, function (bankaccounts) { var sb = '<option value="">--请选择--</option>'; for (var index = 0; index < bankaccounts.Account.length; index++) { var bankaccount = bankaccounts.Account[index]; if (bankaccount.AccountName == account) { sb += '<option selected="selected" value="' + bankaccount.AccountId + '">' + bankaccount.AccountName + '</option>'; } else { sb += '<option value="' + bankaccount.AccountId + '">' + bankaccount.AccountName + '</option>'; } } $("#Account").html(sb); }); } //根据银行账户查询付款银行名称 function GetPayAccountName() { //银行账户 var bankAccount = $("#Account").find("option:selected").text(); $.getJSON('/PurchaseOrder/XXX?bankAccount=' + bankAccount, function (bankAccountName) { $("#PayBankName").val(bankAccountName); }); }