easyUI combobox实现联动效果
我在做项目时，经常用到easyUI框架，今天总结一下easyUI中的combobox吧
创建easyui-combobox的方法，在easyUI的官网都有：
1、从带有预定义结构的元素创建组合框（combobox）
<selectid="cc"class="easyui-combobox"name="dept"style="width:200px;"> <optionvalue="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>
2、从标记创建组合框（combobox）
<inputid="cc"class="easyui-combobox"name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'">
3、使用javascript创建组合框（combobox）
<inputid="cc"name="dept"value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
json数据格式的示例：
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
它的属性和方法就不在赘述了，可以上官网查看。
下面来说一下关于两个combobox发联动
//初始化下拉列表
functionInitCombobox(){
$("#combobox_one").combobox({
onLoadSuccess:function(){
vartypes=$("#combobox_one").combobox('getData');
if(types.length>0){
$("#combobox_one").combobox('select',types[0].Value);//全部
}
}
});
$("#combobox_two").combobox({
url:'...';
onLoadSuccess:function(){
vartypes=$("#combobox_one").combobox('getData');
if(types.length>0){
$("#combobox_two").combobox('select',types[0].Value);//全部
}
},
onSelect:function(record){
varurl='...'+record.Value;
$("#combobox_one").combobox('reload',url);
}
});
$(function(){
vartypeData=[{
text:"来源",
value:"prodName"
},{
text:"排放",
value:"ars"
}];
varoptions01=[{
text:"生活污水",
value:"eq"
},{
text:"工业用水",
value:"ne"
}];
varoptions02=[{
text:"工业用水",
value:"ne"
},{
text:"生活垃圾",
value:"ge"
}];
//初始化查询项目的下拉列表
$("#type").combobox({
valueField:'value',//值字段
textField:'text',//显示的字段
data:typeData,
panelHeight:170,
onSelect:function(){
varmyOptValue=$("#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,
});
});
下面是一个关于省市区的联动：
varh=$(window).height()*0.65;
//省级
$('#province').combobox({
valueField:'name',//值字段
textField:'name',//显示的字段
url:'/TidewaySHPServer/area/findAllProvince',//url为java后台查询省级列表的方法地址
panelHeight:h,
editable:true,
//模糊查询
filter:function(q,row){
varopts=$(this).combobox('options');
returnrow[opts.textField].indexOf(q)==0;//从头匹配,改成>=即可在任意地方匹配
},
onSelect:function(rec){
$('#city').combobox('setValue',"");
$('#county').combobox('setValue',"");
varurl='/TidewaySHPServer/area/findAllCity?parentId='+rec.areaId;//url为java后台查询事级列表的方法地址
$('#city').combobox('reload',url);
}
});
//市区
$('#city').combobox({
valueField:'name',//值字段
textField:'name',//显示的字段
panelHeight:'auto',
editable:false,//不可编辑，只能选择
value:'',
onSelect:function(rec){
$('#county').combobox('setValue',"");
varurl='/TidewaySHPServer/area/findAllDistrictOrCounty?parentId='+rec.areaId;//url为java后台查询区县级列表的方法地址
$('#county').combobox('reload',url);
}
});
//区县
$('#county').combobox({
valueField:'areaId',
textField:'name',
panelHeight:'auto',
editable:false,
});
基本上想写的都写完了，主要是多个combobox的联动效果，写的不完美大家相互学习一下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。