Easyui calls the database to achieve the effect of three-level linkage between provinces, cities, counties and districts.
1. First, design the database, as shown in the figure. One has 4 fields code, note, pycode. code: administrative division code, note: Chinese annotation, pycode: pinyin abbreviation. The code consists of 6 fields. If it is the provincial level, it is 0,000, if it is the prefecture-level city, it is 00, and the other is the county and district.
I have uploaded the relevant database code to my csdn resource, and students who need it will download it themselves.
2. I use java, SSH framework combined with Easyui controls
3. The html code is as follows
<tr> <td>Province:</td> <td><input name="contact.province" id="province" ></td> <td>City:</td> <td><input name="contact.city" id="city"></td> <td>County and District:</td> <td><input name="contact.county" id="county" ></td> </tr>
4. The corresponding JS code is as follows
$(function(){ // Select the control in the drop-down box. The content of the drop-down box is to dynamically query the database information $('#province').combobox({ url:'apply/provinceCombobox_combobox.action', editable:false, //No editable state cache:false, // panelHeight: 'auto',//Auto-height fit valueField:'code', textField:'note', onHidePanel: function(){ $("#city").combobox("setValue",''); $("#county").combobox("setValue",''); $("#cregicounty").val(''); var province = $('#province').combobox('getValue'); if(province!=''){ $.ajax({ type: "POST", url: "apply/cityCombobox_combobox.action?province="+province, cache: false, dataType : "json", success: function(data){ $("#city").combobox("loadData",data); } } }); } } }); $('#city').combobox({ editable:false, //Un-editable state cache: false, //panelHeight: 'auto',//Auto-height fit valueField:'code', textField:'note', onHidePanel: function(){ $("#cregicounty").val(''); $("#county").combobox("setValue",''); var city = $('#city').combobox('getValue'); if(city!=''){ $.ajax({ type: "POST", url: "apply/countyCombobox_combobox.action?city="+city, cache: false, dataType : "json", success: function(data){ $("#county").combobox("loadData",data); } } }); } } }); $('#county').combobox({ editable:false, //No editable state cache:false, // panelHeight: 'auto',//Auto-height fit valueField:'code', textField:'note', onHidePanel: function(){ var str=$('#county').combobox('getText'); $("#cregicounty").val(str); } }); $('#country').combobox({//country code initialization valueField:'english', textField:'note', url:'json/country.json', cache: false, //panelHeight: 'auto',//auto-height fit onChange: function(newValue,oldValue){ countrySearch(newValue); countries(newValue); } });});5. Java Action Code
//Query the national administrative district code province public String provinceCombobox() throws Exception{ List list=comboboxService.findProvince(); this.jsonUtil(list); return null; } //Query the national administrative district code city public String cityCombobox() throws Exception{ List list=comboboxService.findCity(province); this.jsonUtil(list); return null; } //Query the national administrative district code county and district public String county and district throws Exception{ List list=comboboxService.findCounty(city); this.jsonUtil(list); return null; } //Call the json tool method and pass in the parameter alist public void jsonUtil(Object accountlist) throws Exception{ HttpServletResponse response = ServletActionContext.getResponse(); log.info("JSON format:" + accountlist.toString()); String returnJson = JsonConvert.returnJson(accountlist); response.setCharacterEncoding("utf-8"); response.getWriter().println(returnJson); }6. Tool JSON code
import java.io.StringWriter;import org.codehaus.jackson.map.ObjectMapper;public class JsonConvert { static String jsonStr; public static String returnJson(Object object) throws Exception{ ObjectMapper objectMapper = new ObjectMapper(); StringWriter stringWriter = new StringWriter(); objectMapper.writeValue(stringWriter, object); jsonStr = stringWriter.toString(); return jsonStr; }}7. Corresponding interface code
//Query the province public List findProvince() throws Exception;//Query the city public List findCity(String code) throws Exception;//Query the county and district public List findCounty(String code) throws Exception;
8. Corresponding interface implementation class code
//Putdown box--Query province public List findProvince() { log.info("=== drop-down box--Query province"); Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class); criteria.add(Restrictions.like("code", "%0000")); criteria.addOrder(Order.asc("code")); return criteria.list(); } //Putdown box-Query city public List findCity(String code2) { log.info("=== drop-down box-Query city"); String id=code2.substring(0,2); Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class); criteria.add(Restrictions.like("code", id+"%00")); criteria.add(Restrictions.ne("code",code2 )); criteria.addOrder(Order.asc("code")); return criteria.list(); } // Pull-down box--query county public List findCounty(String code3) { log.info("=== drop-down box--query county"); String id=code3.substring(0,4); Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class); criteria.add(Restrictions.like("code", id+"%")); criteria.add(Restrictions.not(Restrictions.like("code", "%01"))); criteria.add(Restrictions.ne("code",code3 )); criteria.addOrder(Order.asc("code")); return criteria.list(); }The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.