easyUI combobox实现联动效果

前端之家收集整理的这篇文章主要介绍了easyUI combobox实现联动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的comboBox吧 创建easyui-comboBox方法,在easyUI的官网都有:

1、从带有预定义结构的 元素创建组合框(comboBox

Box" name="dept" style="width:200px;">

2、从标记创建组合框(comboBox

Box" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.PHP'">

3、使用 javascript 创建组合框(comboBox

Box({ url:'comboBox_data.json',valueField:'id',textField:'text' });

json 数据格式的示例:

它的属性方法就不在赘述了,可以上官网查看。 下面来说一下关于两个comboBox发联动

0){ $("#comboBox_one").comboBox('select',types[0].Value); //全部 } } }); $("#comboBox_two").comboBox({ url:'...'; onLoadSuccess: function(){ var types = $("#comboBox_one").comboBox('getData'); if (types.length > 0){ $("#comboBox_two").comboBox('select',types[0].Value); //全部 } },onSelect: function(record){ var url = '...' + record.Value; $("#comboBox_one").comboBox('reload',url); } });
垃圾",value: "ge" }]; //初始化查询项目的下拉列表 $("#type").comboBox({ valueField: 'value',//值字段 textField: 'text',//显示的字段 data: typeData,panelHeight: 170,onSelect: function() { var myOptValue = $("#type").comboBox("getValue"); //1.清空原来的classify这个comboBox中的选项 $("#classify").comboBox("clear"); //2.动态添加"操作类型"的下拉列表框的option if (myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus')) { console.info("myOptValue = " + myOptValue); $("#classify").comboBox({ panelHeight: 50,data: options01 }); } else { $("#classify").comboBox({ panelHeight: 140,data: options02 }); } //3.清空文本输入框——用户输入的条件 //$("#userInputCondition").val(""); } }); //初始化classify的下拉列表 $("#classify").comboBox({ valueField: 'value',textField: 'text',data: options02,panelHeight: 140,}); });

下面是一个关于省市区的联动:

=即可在任意地方匹配 },onSelect: function(rec) { $('#city').comboBox('setValue',""); $('#county').comboBox('setValue',""); var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url为java后台查询事级列表的方法地址 $('#city').comboBox('reload',url); } }); //市区 $('#city').comboBox({ valueField: 'name',//显示的字段 panelHeight: 'auto',editable: false,//不可编辑,只能选择 value: '',onSelect: function(rec) { $('#county').comboBox('setValue',""); var url = '/TidewaySHPServer/area/findAllDistrictOrCounty?parentId=' + rec.areaId;//url为java后台查询区县级列表的方法地址 $('#county').comboBox('reload',url); } }); //区 县 $('#county').comboBox({ valueField: 'areaId',textField: 'name',panelHeight: 'auto',});

基本上想写的都写完了,主要是多个comboBox的联动效果,写的不完美大家相互学习一下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/42408.html

猜你在找的JavaScript相关文章