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"组件。
这个问题必须在后台加以区分,否则会出错。