1、需求：已有一個下拉框A表示地區，現新增需求，需要在A選擇不同地區時，增加一個展示該地區所有城市的下拉框B，
由於城市較多，要求B能實現用戶輸入和模糊匹配展示功能。
2.實現：
(1)首先在A下面把B列出來，然后給A加一個onchange事件，當內容改變時調用createCities函數。
1 <tr id="districtLine" style="display: none;"> 2 <th>請選擇地區：</th> 3 <td> 4 <select id="districtId" name="districtId" 5 style="width: 171px;" onchange="createCities();"> 6 <c:forEach var="dist" items="${districts}" varStatus="abc"> 7 <c:choose> 8 <c:when test='${abc.index eq 0}'> 9 <option value="${dist.districtId }" selected="selected">${dist.districtName }</option> 10 </c:when> 11 <c:otherwise> 12 <option value="${dist.districtId }">${dist.districtName }</option> 13 </c:otherwise> 14 </c:choose> 15 </c:forEach> 16 </select> 17 </td> 18 </tr> 19 <tr id="districtLine2" style="display: none;"> 20 <th>請選擇城市：</th> 21 <td> 22 <input name="districtId2" id="districtId2"/> 23 </td> 24 </tr>
(2)createCities，在ajax從后台取地區所有城市成功以后，用easyui的combobox創建下拉框，關鍵是combobox的filter屬性。function的第一個參數q是用戶輸入的內容，第二個參數row是combobox內的每一項
數據，如果程序員使用了combobox的filter方法，當用戶在combobox中輸入內容時，針對每一條combobox中的數據都會調用function，如果返回true則表示過濾成功，過濾成功的意思就是展示出來。
1 function createCities(){ 2 var daqu = $('#districtId').val(); 3 $.ajax({ 4 url:'${pageContext.request.contextPath}/goods/getCitiesByDaqu', 5 type:'post', 6 dataType:'json', 7 data:{daquId:daqu}, 8 success:function(cities){ 9 $('#districtId2').combobox({ 10 valueField:'districtId', 11 textField:'districtName', 12 data:cities, 13 filter:function(q,row){ 14 return row.districtName.indexOf(q)>=0; 15 } 16 }); 17 } 18 }); 19 }
(3)在頁面加載完畢以后就調用createCities
1 $(function() { 2 createCities(); 3 });
3、結果展示
(1)級聯結果展示
(2)內容模糊匹配展示
4、后記
我們使用easyui的combobox構造的下拉框，當用戶正常使用它也就是當用戶選中了某一項時，表單提交到后台的數據也是正常的select option中的value，
但當用戶在combobox中手動輸入內容，並未點選任何combobox列出的內容時，表單提交到后台的數據卻是用戶輸入的內容。
比如：如果滄州的districtId是100，當用戶輸入州，並點選了聯想結果中的滄州以后，提交表單以后后台接收到的district2內容是100，
如果用戶沒有點選聯想結果，而是在城市下拉框外的地方點擊了一下使下拉框失去焦點，這時提交表單以后后台接收到的district2內容是"州"。
原因是第一種情況easyui將district2翻譯成<select>下拉框組件，而第二種情況easyui將district2翻譯成input type="text"組件。
這個問題必須在后台加以區分，否則會出錯。