(转)extJs combox 动态下拉框联动(级联)

最新推荐文章于 2023-10-08 12:00:50 发布

weixin_33796205

最新推荐文章于 2023-10-08 12:00:50 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hb-strive/archive/2013/04/10/3012406.html

本文详细介绍了如何实现一个简单的二级联动下拉框功能，包括使用Ext.js库进行数据加载与绑定，以及如何在选择第一个下拉框选项后自动加载并绑定第二个下拉框的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.
Js代码  
//  第一个下拉框  
var parentStore = new Ext.data.Store({  
    proxy: new Ext.data.HttpProxy({  
        url: 'loadByParentid.action?parentid=1001'  
    }),  
    reader: new Ext.data.JsonReader({  
    root: 'list',  
    id: 'id'  
    }, [  
        {name: 'id', mapping: 'id'},  
        {name: 'mc', mapping: 'name'}  
    ])  
});   
//     第二个下拉框  
var childStore = new Ext.data.Store({  
    proxy: new Ext.data.HttpProxy({  
        url: '#'  
    }),  
    reader: new Ext.data.JsonReader({  
    root: 'list',  
    id: 'id'  
    }, [  
        {name: 'id', mapping: 'id'},  
        {name: 'mc', mapping: 'name'}  
    ])  
});

parentStore.load();



     Ext.form.ComboBox({  
  　　　　  fieldLabel: '请选择分类',  
           xtype:'combo',  
           store: parentStore,  
           valueField :"id",  
           displayField: "mc",  
           mode: 'local',  
           forceSelection: true,//必须选择一项  
           emptyText:'请选择分类...',//默认值  
           hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name  
           editable: false,//不允许输入  
           triggerAction: 'all',
  　　　　  id :'parent_id',  
           name: 'parent',  
      　　 width: 400,  
       　　listeners:{    
            select : function(combo, record,index){  
                childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});  
                    childStore.load();   
            }  
        }  
       });

　　　　Ext.form.ComboBox({  
           xtype:'combo',  
           store: childStore,  
           valueField :"id",  
           displayField: "mc",  //数据是在本地  
           mode: 'local',  
           forceSelection: true,//必须选择一项  
           emptyText:'请选择子分类...',//默认值  
           hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name  
           editable: false,//不允许输入  
           triggerAction: 'all',
           fieldLabel: '选择',  
           id : 'child_id',  
           name: 'child',  
  　　　　  width: 400  
       });