朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
不管是幾級下拉列表的聯動實現本質上都是根據某個下拉列表的變化，去動態加載其他下拉列表，如：省、市、地區。
當我們監聽到省變化時，向service端發送省的編號，service端根據收到的"省"編號到數據庫中查詢該省所對應的市信息，
地區同理，抓住這一點，我們只需要監聽 combobox 的 select 事件並在其中實現邏輯即可。
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架開始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架結束--> 11 <script type="text/javascript"> 12 Ext.onReady(function () { 13 //初始化標簽中的Ext:Qtip屬性。 14 Ext.QuickTips.init(); 15 Ext.form.Field.prototype.msgTarget = 'side'; 16 17 //----------------------下拉列表開始----------------------// 18 //創建市數據源 19 var combocitystore = new Ext.data.Store({ 20 //設定讀取的地址 21 proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' }), 22 //設定讀取的格式 23 reader: new Ext.data.JsonReader({ root: 'data' }, 24 [{ name: 'id' }, { name: 'name'}]) 25 }); 26 //創建區數據源 27 var comboareastore = new Ext.data.Store({ 28 //設定讀取的地址 29 proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/Area.ashx' }), 30 reader: new Ext.data.JsonReader({ root: 'data' }, 31 [{ name: 'id' }, { name: 'name'}]) 32 }); 33 //創建市Combobox 34 var comboboxcity = new Ext.form.ComboBox({ 35 id: 'comboboxcity', 36 fieldLabel: '市', 37 width: 120, 38 store: combocitystore, 39 displayField: 'name', 40 valueField: 'id', 41 triggerAction: 'all', 42 emptyText: '請選擇...', 43 allowBlank: false, 44 blankText: '請選擇市', 45 editable: false, 46 mode: 'local', //該屬性和以下方法為了兼容ie8 47 listeners: { 48 'render': function () { 49 combocitystore.load(); 50 } 51 } 52 }); 53 54 //創建區Combobox 55 var comboareacity = new Ext.form.ComboBox({ 56 fieldLabel: '區', 57 width: 120, 58 store: comboareastore, 59 displayField: 'name', 60 valueField: 'id', 61 triggerAction: 'all', 62 emptyText: '請選擇...', 63 allowBlank: false, 64 blankText: '請選擇區', 65 editable: false 66 }); 67 //聯動的實現 68 comboboxcity.on('select', function () { 69 comboareastore.baseParams.id = comboboxcity.getValue(); 70 comboareacity.setValue(''); 71 comboareastore.load(); 72 }) 73 //----------------------下拉列表結束----------------------// 74 //表單 75 var form = new Ext.form.FormPanel({ 76 frame: true, 77 title: '表單標題', 78 style: 'margin:10px', 79 items: [comboboxcity, comboareacity] 80 }); 81 //窗體 82 var win = new Ext.Window({ 83 title: '窗口', 84 width: 476, 85 height: 374, 86 resizable: true, 87 modal: true, 88 closable: true, 89 maximizable: true, 90 minimizable: true, 91 buttonAlign: 'center', 92 items: form 93 }); 94 win.show(); 95 }); 96 </script> 97 </head> 98 <body> 99 <!-- 100 說明： 101 (1)var combocitystore = new Ext.data.Store():創建一個新的數據源。 102 (2)proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' })：數據代理為http代理，地址為/App_Ashx/Demo/City.ashx。 103 (3)reader: new Ext.data.JsonReader({ root: 'data' },[{ name: 'id' }, { name: 'name'}]):讀取json返回值根節點為data，對象列為id和name。 104 這里要結合client與service觀察,我在service端的輸出如下：{data:[{id:1,name:'北京'},{id:2,name:'上海'}]} 105 (4)comboboxcity.on('select', function () {}：市選擇變化時觸發事件。 106 (5)comboareastore.baseParams.id = comboboxcity.getValue()：注意，前面的comboareastore是區的數據源， 107 當市變化時，我們給區的數據源加上個向service端發送的參數。 108 (6)comboareacity.setValue('')：把區的下拉列表設置為空，由於非空驗證，Ext會提示用戶“請選擇區”，這個地方也可以把加載出來的第一個區 109 顯示在區的下拉列表中，具體請自行實現吧。 110 (7)comboareastore.load()：區的數據源重新加載。 111 --> 112 </body> 113 </html>
其中與service交互用到兩個.net 一般處理程序文件，源碼如下：
(1)/App_Ashx/Demo/City.ashx
1 using System.Web; 2 3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo 4 { 5 public class City : IHttpHandler 6 { 7 public void ProcessRequest(HttpContext context) 8 { 9 context.Response.Write("{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}"); 10 } 11 12 public bool IsReusable 13 { 14 get 15 { 16 return false; 17 } 18 } 19 } 20 }
(2)/App_Ashx/Demo/Area.ashx
1 using System.Web; 2 3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo 4 { 5 public class Area : IHttpHandler 6 { 7 public void ProcessRequest(HttpContext context) 8 { 9 //接收Client端傳來的參數，交根據條件返回 10 if (context.Request.Form["id"].ToString() == "1") 11 { 12 context.Response.Write("{data:[{id:1,name:'東城區'},{id:2,name:'西城區'},{id:2,name:'海淀區'}]}"); 13 } 14 else 15 { 16 context.Response.Write("{data:[{id:1,name:'楊浦區'},{id:2,name:'虹口區'},{id:2,name:'閘北區'}]}"); 17 } 18 } 19 20 public bool IsReusable 21 { 22 get 23 { 24 return false; 25 } 26 } 27 } 28 }
2.效果如下：
