JQuery EasyUI Combobox 實現省市二級聯動選單
阿新 • • 發佈：2019-02-20
//編輯修改或新增頁面聯動可以這樣寫
jQuery(function(){
// 省級
$('#province').combobox({
valueField:'itemvalue', //值欄位
textField:'itemtext', //顯示的欄位
url:'/user/sort/province_list',
panelHeight:'auto',
required:true,
editable:true,//不可編輯，只能選擇
value:'${user.province}',
onChange:function(province){
//$('#city').combobox('clear');
$('#city').combobox({
valueField:'itemvalue', //值欄位
textField:'itemtext', //顯示的欄位
url:'/user/sort/city_list?province='+province,
panelHeight:'auto',
required:true,
editable:true,//不可編輯，只能選擇
value:'--請選擇--'
});
}
});
//縣市區
$('#city').combobox({
valueField:'itemvalue', //值欄位
textField:'itemtext', //顯示的欄位
url:'/user/sort/city_list?province=${user.province}',
panelHeight:'auto',
required:true,
editable:true,//不可編輯，只能選擇
value:'${user.city}'
});
});
// 表單table
<tr>
<td align="right">地區 省級</td>
<td align="left">
<input type="text" id="province" name="province" style="width: 128px"
class="easyui-validatebox" validType="selectValid['--請選擇--']" />
</td>
</tr>
<tr>
<td align="right">地區 縣市區</td>
<td align="left">
<input type="text" id="city" name="city" style="width: 128px"
class="easyui-validatebox" validType="selectValid['--請選擇--']"/>
</td>
</tr> 檢視頁面 可以這樣寫
jQuery(function(){
// 省級
$('#province').combobox({
valueField:'itemvalue', //值欄位
textField:'itemtext', //顯示的欄位
url:'/user/sort/province_list',
panelHeight:'auto',
required:true,
editable:false,//不可編輯，只能選擇
value:'${user.province}'
});
//縣市區
$('#city').combobox({
valueField:'itemvalue', //值欄位
textField:'itemtext', //顯示的欄位
url:'/user/sort/city_list?province=${user.province}',
panelHeight:'auto',
required:true,
editable:false,//不可編輯，只能選擇
value:'${user.city}'
});
});
// 表單Table
<tr>
<td align="right">地區 省級</td>
<td align="left">
<input type="text" id="province" name="province"
class="easyui-validatebox" validType="selectValid['--請選擇--']" disabled="disabled"/>
</td>
</tr>
<tr>
<td align="right">地區 縣市區</td>
<td align="left">
<input type="text" id="city" name="city"
class="easyui-validatebox" validType="selectValid['--請選擇--']" disabled="disabled"/>
</td>
</tr> 上述程式碼是邊學習EasyUI,邊總結的，如有不足之處，請諒解！
注意：聯動的時候，最好給組合框都設定寬度，因為我做的時候發現不設定寬度，省級聯動城市的時候，城市組合框寬度會越來越短，設定寬度
style="width: 128px"