Union County city, using Ajax, while using UL analog Select dropdown

Reception Code

Js

Use jquery to display the mouse to the province UL drop-down display

$ ("#province"). Hover (function () {
$ ("#province ul"). Toggle ();
})

Use the jquery effect to show your mouse to the city's UL drop-down display
$ ("#city"). Hover (function () {
$ ("#city ul"). Toggle ();
})

Use the jquery effect to show your mouse to the district's UL drop-down display
$ ("#area"). Hover (function () {
$ ("#area ul"). Toggle ();
})

Change the function triggered by the province

function Changepro (ele) {
$ ("#showPro"). Text (Ele.innertext);
$ ("#showCity"). Text ("City");
$ ("#showArea"). Text ("zone");
$ ("#pid"). Val (Ele.value);
$ ("#cid"). Val ("");
$ ("#aid"). Val ("");
$.ajax ({
URL: ' Getajaxjson.action ',
Data:{type: ' City ', Id:ele.value},
Type: ' POST ',
Success:function (data) {
var citylist = data.list;
var Ulele = $ ("#cities");
Ulele.children (). remove ();
for (Var i=0;i<citylist.length;i++) {
Ulele.append ("<li onclick= ' changecity (this) ' value=" + Citylist[i].cityid + "style= ' border:0px ' >" +cityList[i]. city+ "</li>");
}
}
});
}
Change the function of the city trigger
function Changecity (ele) {
$ ("#showCity"). Text (Ele.innertext);
$ ("#showArea"). Text ("zone");
$ ("#cid"). Val (Ele.value);
$ ("#aid"). Val ("");
$.ajax ({
URL: ' Getajaxjson.action ',
Data:{type: ' Area ', id:ele.value},
Type: ' POST ',
Success:function (data) {
var arealist = data.list;
var Ulele = $ ("#areas");
Ulele.children (). remove ();
for (Var i=0;i<arealist.length;i++) {
Ulele.append ("<li onclick= ' Changearea (this) ' value=" + arealist[i].areaid + "style= ' border:0px ' >" +areaList[i]. area+ "</li>");
}
}
});
}
Changing the function of district triggering
function Changearea (ele) {
$ ("#showArea"). Text (Ele.innertext);
$ ("#aid"). Val (Ele.value);
}
HTML code

<span class= "list_title_1 fl" id= "Province" >
<span class= "FL" id= "Showpro" style= "Font-size:18px;padding-top:5px;width:170px;float:left" > Province </span>
<ul>
<c:foreach items= "${provincelist}" var= "Province" >
<li onclick= "Changepro (This)" style= "border:0px" value= "${province.provinceid}" >${province.province}</li >
</c:forEach>
</ul>
</span>
<span class= "list_title_1 fl" style= "margin-left:12px" id= "City" >
<span class= "FL" id= "showcity" style= "font-size:18px;padding-top:5px;width:180px" > City </span>
<ul id= "Cities" >
</ul>
</span>
<span class= "list_title_1 fl" style= "MARGIN-LEFT:12PX;" id= "area" >
<span class= "FL" id= "Showarea" style= "font-size:18px;padding-top:5px;width:180px" > Zone </span>
<ul id= "Areas" >
</ul>
</span>

Simulate the CSS code of select dropdown

. list_title_1{width:200px; height:50px; border:1px solid #d6d6d6; line-height:34px; text-indent:10px; font-size:14px; Color: #999; Cursor:pointer; MARGIN-TOP:-7PX;}
. list_title_1 span{width:70px; margin-left:0px;}
. list_title_1 img{float:right; margin:15px 5px 0 0}
. list_title_1 ul{Display:none; width:200px; position:absolute; border:1px solid #d6d6d6; border-bottom:none; margin-top:34px; margin-left:-1px;}
. list_title_1 ul li{width:100%; height:34px; line-height:36px; border-bottom:1px solid #d6d6d6; background: #fff; cursor :p Ointer}
. list_title_1 ul li:hover{background: #43B1E8; color: #fff;}

Get the Java code for cities and counties

public void Getajaxjson () {//Struts2 frame used here
try {
HttpServletResponse response = GetResponse ();
Response.setcontenttype ("Application/json;charset=utf-8");
PrintWriter out = Response.getwriter ();
String type = Getrequest (). GetParameter ("type");
String id = getrequest (). GetParameter ("id");
map<string,object> map = new hashmap<string,object> ();
Jsonobject Jo = null;
if (type!=null&& "City". Equals (type)) {
Hql= "from cities where provinceid= '" + ID + "'";
list<cities> list = Cdao.getlistobj (hql,new cities ());
Map.put ("type", type);
Map.put ("list", list);
Jo = Jsonobject.fromobject (map);
}else if (type!=null&& "area". Equals (type)) {
Hql= "from areas where cityid= '" + ID + "'";
list<areas> list = Cdao.getlistobj (hql,new areas ());
Map.put ("type", type);
Map.put ("list", list);
Jo = Jsonobject.fromobject (map);
}
String str = jo.tostring ();
Out.print (str);
Out.close ();
} catch (Exception e) {
E.printstacktrace ();
}
}

Corresponding configuration file fragment for the corresponding stuts2

<!--get the provinces and cities JSON--
<action name= "Getajaxjson" class= "action.unset.ProjectTraderAction" method= "Getajaxjson" >
</action>

Note the drop-down of the province part is placed within the request domain. Don't put Ajax inside the requirements

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.

Union County city, using Ajax, while using UL analog Select dropdown