jQuery easyUI combobox下拉框 联动 级联

新做了一个下拉框联动的小功能，网上找的是省市级联，之前也套用了，这次是自定义的一个级联，相当于父子关系，有如下两张表：

表A： （分类表）（相当于主菜单）

表B： （目录表）（相当于子菜单）

注：LinkNumber是相当于一个序号 ，两张表之间用ClassNumber关联

前台信息填写如下：

分类名称下拉框代码：

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
<div>分类名称: </div>
<div id="_divTxtClass">
<input class="easyui-textbox" id="txtClassName" type="text" data-options="prompt:'请输入分类名称',required:true" style="width: 100%; height: 32px">
</div>
<div id="_divSeleClass">
<input style="width: 300px; height: 32px;" id="seleClass" class="easyui-combobox"
name="language"
data-options="
url:'http://xxx/api/GetNavClass',
method:'get',
valueField:'ClassNumber',
textField:'ClassName',
panelHeight:'auto',
editable:false,
required:true">
</div>
</div>

下面是通过下拉框的切换事件来改变目录下拉框的值，这里首先绑定value和text为表B的目录编号和目录名称：

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
<div>目录名称: </div>
<div id="_divTxtLink">
<input class="easyui-textbox" id="txtLinkName" type="text" data-options="prompt:'请输入目录名称',required:true" style="width: 100%; height: 32px">
</div>
<div id="_divSeleLink">
<input style="width: 300px; height: 32px;" id="seleLink" class="easyui-combobox"
name="language"
data-options="
method:'get',
valueField:'LinkId',
textField:'LinkName',
panelHeight:'auto',
editable:false,
required:true"></div>

$('#seleClass').combobox({
onSelect: function (row) {
if (row != null) {
$('#seleLink').combobox({
url: "http://xxx/api/GetNavLink?classNumber=" + row.ClassNumber
});
}
}
});

 public IEnumerable<NavLink> FindLinkByNum(string classNumber)
{
if (string.IsNullOrWhiteSpace(classNumber))
{
return null;
}
var query = QueryFactory.DB<NavLink>().Where(c => c.ClassNumber.Equals(classNumber));
var result = query.ToList();
return result;
}

这里是效果图来两张~

到这里大概就结束了，主要是利用combobox的下拉框改变事件来实现以上功能的，如果有需要给默认值，可以通过页面url参数传值到当前页，然后默认值用下面介个js来实现：

$('#cc').combobox({
onLoadSuccess ：function（）{
$('#cc').combobox('select','选项的valueField');
}

最后

以上就是可爱蜻蜓为你收集整理的jQuery easyUI combobox下拉框 联动 级联的全部内容，希望文章能够帮你解决jQuery easyUI combobox下拉框 联动 级联所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。