easyUI的combobox實作級聯

先簡單介紹下combobox：

easyUI重寫了select，取而代之的是combobox，有如下幾種方式可以建立一個combobox

1、使用select标簽，并加上class="easyui-combobox"，這種方式比較适用于靜态的選項

2、使用input标簽，并加上class="easyui-combobox"，後面跟上data-options，可以用local或是remote方式加載資料

3、使用js方式，和2基本相同，隻是把combobox一些屬性的設定分離到了js中

下面是級聯的思路：

combobox實作級聯基本上和select類似，比如省份和城市的級聯

當省份選完這個事件發生之後，城市的選擇框裡就會重新整理資料，得到目前省份下的所有城市

那麼關鍵點就是——》接收事件——》重新整理第二級的選擇框

combobox有提供onSelect這個事件點，且傳入一個選中的記錄rec，比如說我們可以取rec的主鍵rec.id(比如是浙江，id是29)，那麼我們可以拿到這個29去背景查詢浙江省下的城市Json資料，這串Json就是需要放到城市combobox中的資料

那麼開始動手吧：

<tr>
    <td>省份:</td>
    <td><input class="easyui-combobox" name=”province” data-options="
     	method:'get',
     	mode:'remote',
     	url:'test/getProvinceList',
     	onSelect:function(rec){
     		$('[comboname=city]').combobox('clear');
     		$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + rec.id);
     	},
     	onLoadSuccess:function(){
     		var value = $(this).combobox('getValue');
     		if(value != ''){
    		<span style="white-space:pre">	</span>$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + $(this).combobox('getValue'));
    			}
     	}
    	">
    </td>
    
    <td>城市:</td>
    <td><input class="easyui-combobox" panelHeight="auto" name="city" data-options="
     		prompt:'請先填入省份名稱'
    	">
    </td>
</tr>
           

使用中可能碰到的問題：

1、為combobox指定name後，經過easyUI自己解析後，生成的combobox（也就是select）沒有name這個屬性，取而代之的是comboname，因為name要作為input的name。是以要根據name得到combobox要使用comboname

2、$('[comboname=city]').combobox('clear'); 這一步也是必要的，不然combobox中之前選中的值将無法清除，比如之前選的是浙江--杭州（id為1），若此時更改省份變為江蘇，那麼若不加clear，此時城市則變成目前省份id為1的城市，也就是南京（id為1）。要是此id在對應省份無記錄，那麼就隻會顯示一個id，那麼顯然不是我們想看到的。