E-commerce business background-easyui combox three-level linkage

I've been working on the project for a few days. Easyui , previously done Itoo when the front end is encapsulated, and there is no real contact with the three-level linkage effect. This three-level linkage is to achieve the provincial and county linkage. Select a province to follow the corresponding city display, followed by the corresponding county display.

Not only this, because it is to modify the function, so not only to find out the province, city, county display, and from the database query from the region needs to become the default display value. That is, from the database to find out the area with all the provinces and cities to compare, the database is displayed as the default region. For example, the database is stored in Hebei province Langfang Yan suburb, then the display in the interface of the default value must also be Hebei province Langfang Yan suburb. This is also in my implementation of the beginning of a very headache, and later through the query is actually quite simple.

first I put the query from the database into the interface and hide it, and then the query from the database all the provinces displayed to the interface. Next use JS code to get hidden regions, and set these areas in the drop-down box by default is selected.

JSP Code:   

<tr>   <td id= "area" ><input id= "Shengyincang" style= "Display:none;" value= "${sheng}"/>< Input id= "Shiyincang" style= "Display:none;" value= "${shi}"/><input id= "Xianyincang" style= "Display:none;" Value= "${xian}"/> Area:   </td>   <td><select id= "sheng" class= "Easyui-combobox" Name= "Sheng ">        <c:foreach var=" catage "items=" ${requestscope.shenglist} "varstatus=" status "><option style=" width:100px; "Value=" ${catage.id} ">${catage.province_city}</option></c:forEach></select> <input id= "Shi" class= "Easyui-combobox"  name= "Shi"/> <input id= "Xian" class= "Easyui-combobox"  name = "Xian"/> <span id= "Citytip" ></span>   </td></tr>

JS code: In fact , the JS code implementation is very simple, because the Easyui package is really very powerful ah.

Window.onload=function () {//Gets the area var shenguid=$ ("#shengyincang") that is hidden on the interface. Val (); var shiuid=$ ("#shiyincang"). Val (); var xianuid=$ ("#xianyincang"). Val ();//var Opts=document.getelementbyid ("Sheng");//Set Region is selected $ ("#sheng"). ComboBox (' Select ', Shenguid); $ ("#shi"). ComboBox (' select ', Shiuid); $ ("#xian"). ComboBox (' select ', Xianuid);} Three-level linkage events, select provinces, corresponding to all the city followed out, select the city corresponding county followed out. $ (function () {//Trigger Save Option $ ("#sheng"). ComboBox ({onselect:function (reco RD) {$ ("#shi"). ComboBox ("SetValue", "");//emptying the City $ ("#xian"). ComboBox ("SetValue", "");//Empty county var shengid=$ (' #sheng '). ComboBox (' GetValue '); $.ajax ({async:false,url: "Personalprofile_findshi.action", Data:{shengid:shengid},type: " POST ", DataType:" JSON ", success:function (data) {//alert (data), $ (" #shi "). ComboBox (" LoadData ", data);});}); $ (' #shi '). ComboBox ({Editable:false,//non-editable state cache:false, Panelheight: ' 150 ',//auto height suitable for Valuefield: ' ID ', TextField: ' province_city '}); When the city option is triggered, $ ("#shi"). ComboBox ({Onselect:fUnction (record) {$ ("#xian"). ComboBox ("SetValue", "");//Empty county var shiid=$ (' #shi '). ComboBox (' GetValue '); $.ajax ({async: False,url: "Personalprofile_findxian.action", Cache:false,data:{shiid:shiid},type: "POST", DataType: "JSON", success : function (data) {$ ("#xian"). ComboBox ("LoadData", data);});}); $ (' #xian '). ComboBox ({Editable:false,//non-editable state cache:false, Panelheight: ' 150 ',//auto height fit Valuefield : ' ID ', TextField: ' province_city '}); });

finally:

encapsulation is good, but try to understand the bottom, because only the bottom of the master, we can be a strategist. Before doing Itoo did not feel anything, then do this project only to find itoo package Too good, I know too little, so that the project is a little rusty.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

E-commerce business background-easyui combox three-level linkage