JQuery EasyUI combobox 级联下拉框的做法

JQuery EasyUI combobox 级联下拉框的做法

   
官网已经提供了事例代码:
  1. input id="cc1" class="easyui-combobox" data-options="
  2. valueField: 'id',
  3. textField: 'text',
  4. url: 'get_data1.php',
  5. onSelect: function(rec){
  6. var url = 'get_data2.php?id='+rec.id;
  7. $('#cc2').combobox('reload', url);
  8. }" />
  9. <</span>input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

代码讲解:
       valueField:代表下拉框的值
       textField:代表下拉框所显示的文本
       这两个属性的值是自定义的 ,只要跟你的json匹配即可。
       url:是远程加载url的链接
       onSelect:是选择文本触发的回调方法

说下级联的实现思想:
其实很简单,从上述代码可以清晰的理解:
当我选择一个下拉框值的时候,调用另外一个下拉框的relaod方法,刷新第二个下拉框的列表。
举个例子:第一个下拉框是部门,第二个下拉框是人员
当我选择第一个下拉框的时候,获取这个下拉框的id,将这个id在onSelect方法中使用,传递给另一个url,这个url会去查询人员表(根据部门id查询),将返回的json给第二个下拉框进行刷新

posted on 2017-11-03 14:42  步行者811  阅读(261)  评论(0)    收藏  举报

导航