最近项目前台架构确定使用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"}] }]
?
1 楼
wingsrao
2012-06-01
能上一个完整的例子么,对于我这个菜鸟来说,很多都不会用。