EasyUI入门1 实现下拉框二级联动
2017-06-13 16:48
435 查看
无废话直接上代码
var cbRegisterDisciplineId = $('#cbRegisterDiscipline').combobox({ contentType: "application/x-www-form-urlencoded; charset=UTF-8", url: "../../Controller/PurchasePackage/PurchasePackage.ashx?Action=AutoDiscipline", editable: false, valueField: '专业名称', textField: '专业名称', onSelect: function (record) { //刷新数据,重新读取专业下的采购包,并清空当前输入的值 cbRegisterPackageId.combobox({ disabled: false, contentType: "application/x-www-form-urlencoded; charset=UTF-8", url: "../../Controller/InquiryManage/InquiryRegister.ashx?Action=AutoPackage&DisciplineName=" + encodeURIComponent(record.专业名称), type: "get", dataType: "json", //data: { // "DisciplineName": encodeURIComponent(record.专业名称) //}, //中文须编码,用encodeURIComponent valueField: 'KSGUID', textField: 'PINFO' }).combobox('clear');; } }); var cbRegisterPackageId = $('#cbRegisterPackage').combobox({ disabled: true, contentType: "application/x-www-form-urlencoded; charset=UTF-8", url: "../../Controller/InquiryManage/InquiryRegister.ashx?Action=AutoPackage&DisciplineName=" + encodeURIComponent("-全部专业-"), type: "get", dataType: "json", valueField: 'KSGUID', textField: 'PINFO' });
说明
cbRegisterDiscipline是第一级下拉框,选择专业cbRegisterPackage是第二级下拉框,选择专业下所属的采购包
传参数失败问题的解决
我想增加一个查询条件,第二级下拉框根据第一级所选择的专业进行查询,但是不知道为什么采用data: { "DisciplineName": encodeURIComponent(record.专业名称) }, //中文须编码,用encodeURIComponent
的方式传值给ashx失败,提示context.Request[“DisciplineName”]是null。最后改为url方式传值,在ashx采用
string CurrentStr = context.Request.Url.Query; System.Collections.Specialized.NameValueCollection nv = System.Web.HttpUtility.ParseQueryString(CurrentStr, System.Text.Encoding.GetEncoding("utf-8")); string DisciplineName = nv["DisciplineName"]; //对接收的字符串进行URL解码;
的方式拿到DisciplineName的值。
代码片段二的作用
var cbRegisterPackageId = $('#cbRegisterPackage').combobox({ disabled: true, contentType: "application/x-www-form-urlencoded; charset=UTF-8", url: "../../Controller/InquiryManage/InquiryRegister.ashx?Action=AutoPackage&DisciplineName=" + encodeURIComponent("-全部专业-"), type: "get", dataType: "json", valueField: 'KSGUID', textField: 'PINFO' });
其实这段代码(以下简称代码片段二)是可以不要的,只要记得把cbRegisterPackageId换成$(‘#cbRegisterPackage’)就可以了。那这段代码有和没有到底有什么区别呢?
要想看到区别,首先要把片段二里的代码
disabled: true,
true 改为 false
这样在页面初始化的时候,combo1和combo2都处于可用状态,此时你就可以看到当片段二执行的时候combo2初始化时会请求后台数据,绑定全部专业的采购包,当片段二没有的时候,combo2初始化为空;当disabled: true是,combo2是不可用的,所以也看不出区别。
相关文章推荐
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- 在一个jsp页面实现二级下拉框联动,实时读取数据库数据(用javascript实现)
- Ajax实现二级联动下拉框
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- android Spinner实现一个二级联动的下拉列表,选定省份后,城市的下拉列表出现相应变化
- Ajax实现二级联动下拉框
- ASP.NET实现下拉框二级联动组件
- struts+dwr实现下拉列表的二级联动
- Asp.NET实现下拉框二级联动组件
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- Ajax实现二级联动下拉框
- 实现jsp页面二级下拉框联动,实时读取数据库数据
- ASP.NET实现下拉框二级联动组件
- 如何用ci框架+jquery实现下拉列表二级联动
- ASP.NET实现下拉框二级联动组件
- 在一个jsp页面实现二级下拉框联动,实时读取数据库数据
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- 实现jsp页面二级下拉框联动,实时读取数据库数据
- JavaScript实现二级、多级(N级)联动下拉列表框更新版(续)- 四级联动的演示
- 实现一个二级联动的下拉列表