easyUI combox实现select联动

最新推荐文章于 2022-03-17 10:14:16 发布

原创最新推荐文章于 2022-03-17 10:14:16 发布 · 651 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ViewUI

webUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在easyUI中实现Select组件的级联效果。通过使用JSON数据格式及jQuery.easyui.min.js库，实现了一个根据父级选择动态加载子级选项的例子。此方法适用于需要动态展示层级数据的应用场景。

最近项目前台架构确定使用easyUI，easyUI封装了好多比较使用的组件。但要找到easyUI的select级联的demo还真不容易，看到easyUI 的combox使用JSON数据格式，于是想到JSON的可扩展性，把JSON当作一个对象来看。不说废话了贴上代码：（引用了：jquery.easyui.min.js和 jquery-1.7.2.min.js）

HTML代码（两个easyUI的combox）

	<select id="type" class="easyui-combobox" name="type"  style="width:200px;"  	
	url="type_data.json"
	valueField="id"
	textField="text"
	>			
	</select>
	<select id="organs" class="easyui-combobox" name="organs"  style="width:200px;"
	valueField="id"
	textField="text"
	>		
	</select>

Javascipt代码

$(function(){
	  $('#type').combobox({
	       onSelect:function(data){
		// $('#organs').combobox({'data':data.orangs});
		$('#organs').combobox('loadData',data.orangs);
		$('#organs').combobox('select',data.orangs[0].text);
	           }	});  });

demo <type_data.json>数据

[{
	"id":1,
	"text":"type01",
	"selected":true,
	"orangs":[{"id":"1-1","text":"organ1-1"},{"id":"1-2","text":"organ1-2"}]
},{
	"id":2,
	"text":"type02",
	"orangs":[{"id":"2-1","text":"organ2-1"},{"id":"2-2","text":"organ2-2"}]
},{
	"id":3,
	"text":"typ03",
	"orangs":[{"id":"3-1","text":"organ3-1"},{"id":"3-2","text":"organ3-2"}]
},{
	"id":4,
	"text":"type04",
	"orangs":[{"id":"4-1","text":"organ4-1"},{"id":"4-2","text":"organ4-2"}]	
},{
	"id":5,
	"text":"type05",
	"orangs":[{"id":"5-1","text":"organ5-1"},{"id":"5-2","text":"organ5-2"}]
}]