easyUI combobox实现联动效果

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

1、从带有预定义结构的元素创建组合框（combobox）

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option><option>ditem4</option><option>eitem5</option></select>

2、从标记创建组合框（combobox）

<input id="cc" class="easyui-combobox" name="dept"data-options="valueField:"id",textField:"text",url:"get_data.php"">

3、使用 javascript 创建组合框（combobox）
<input id="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发联动

//初始化下拉列表function InitCombobox（） {$（"#combobox_one"）.combobox（{onLoadSuccess: function（）{var types = $（"#combobox_one"）.combobox（"getData"）;if （types.length > 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）;}}）;

 $（function（） {var typeData = [{text: "来源",value: "prodName"}, {text: "排放",value: "ars"}];var options01 = [{text: "生活污水",value: "eq"}, {text: "工业用水",value: "ne"}];var options02 = [{text: "工业用水",value: "ne"}, {text: "生活垃圾",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.动态添加"操作类型"的下拉列表框的optionif （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,}）;}）;

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

var h = $（window）.height（） * 0.65;// 省级 $（"#province"）.combobox（{valueField: "name", //值字段textField: "name", //显示的字段url: "/TidewaySHPServer/area/findAllProvince",//url为java后台查询省级列表的方法地址panelHeight: h,editable: true,//模糊查询filter: function（q, row） {var opts = $（this）.combobox（"options"）;return row[opts.textField].indexOf（q） == 0; //从头匹配,改成>=即可在任意地方匹配},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", //值字段textField: "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",editable: false,}）;

基本上想写的都写完了，主要是多个combobox的联动效果，写的不完美大家相互学习一下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。