Two-level linkage of provinces and cities-using app-jquery-cityselect.js plug-in

Only the provinces and cities two-level linkage, three-level linkage has not been handled well, will be perfected as soon as possible.

Embed ID:

<Divclass= "Form-group">     <label>Address</label>     <P>From:</P>        <Divclass= "Input-group">           <inputID= "areaidfrom"name= "Areaidfrom"type= "hidden"value="" /> 
<inputID= "provincefrom"name= "Provincefrom"type= "hidden" />
<inputID= "cityfrom"name= "Cityfrom"type= "hidden" />           <DivID= "areagroupfrom"></Div>        </Div>        <inputtype= "text"class= "Form-control"name= "Addressfrom"/>     <P>To:</P>        <Divclass= "Input-group">           <inputID= "areaidto"name= "Areaid"type= "hidden"value="" /> 
<inputID= "provinceto"name= "Province"type= "hidden" />
<inputID= "cityto"name= "City"ID= "Movecity"type= "hidden" />           <DivID= "areagroupto"></Div>        </Div>        <inputtype= "text"class= "Form-control"name= "Address"ID= "Moveaddress"/></Div>

Write JS:

<script type= "Text/javascript" >varAreaidfrom = $ ("#areaIdFrom"); varProvincefrom = $ ("#provinceFrom"); varCityfrom = $ ("#cityFrom"); varAreaidto = $ (" #areaidto "); varProvinceto = $ ("#provinceTo"); varCityto = $ ("#cityTo"); $("#areaGroupFrom"). Cityselect ({loadprovince:handleloadprovince, loadcity:handleloadcity, onareaidchanged:function(ID) {areaidfrom.val (ID); }, Onprovincechanged:function(ID, name) {provincefrom.val (name); }, Oncitychanged:function(ID, name) {cityfrom.val (name);    }    }); $("#areaGroupTo"). Cityselect ({loadprovince:handleloadprovince, loadcity:handleloadcity, onareaidchanged:function(ID) {areaidto.val (ID); }, Onprovincechanged:function(ID, name) {provinceto.val (name); }, Oncitychanged:function(ID, name) {cityto.val (name); }    });functionhandleloadprovince () {varList = []; $. Http.list ({URL:"${aapi}/area/province",//${aapi}/area/provinceSuccessfunction(l) {list=l;        }        }); returnlist; }    functionhandleloadcity (Provinceid) {varList = []; $. Http.list ({URL:"${aapi}/area/city/" + Provinceid,//${aapi}/area/city/Successfunction(l) {list=l;        }        }); returnlist; }

</script>

Loading province data: ${aapi}/area/province

loading provinces for Inner Mongolia prefecture-level data: ${aapi}/area/city/"+ provinceid (ID passed into Inner Mongolia)

the effect of a successful request is as follows .

Two-level linkage of provinces and cities-using app-jquery-cityselect.js plug-in