Hi,
Sorry for replying so late. Because I was busing on Beijing Olympic Games. Of course I can show you the code.
There are not well organized. It is better to separate them in different files.
This is the js codes:
function changeCity(provinceId)
{
var url="/html/portlet/ext/ajaxServer/dynamicSelect_City.jsp";
url=url+"?provinceId="+provinceId;
var controlId = document.<portlet:namespace />fm.<portlet:namespace />cityId;
init(url, controlId);
clearList(document.<portlet:namespace />fm.<portlet:namespace />areaId);
}
function changeArea(cityId)
{
var url="/html/portlet/ext/ajaxServer/dynamicSelect_Area.jsp";
url=url+"?cityId="+cityId;
var controlId = document.<portlet:namespace />fm.<portlet:namespace />areaId;
init(url, controlId);
}
function init(url, controlId)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser doesn't supoort AJAX!");
return;
}
xmlHttp.onreadystatechange=function()
{
stateChanged(controlId);
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function GetXmlHttpObject()
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function stateChanged(controlId)
{
if (xmlHttp.readyState==4)
{
updateList(controlId);
}
}
function clearList(listId)
{
var i;
for(i=listId.options.length-1;i>=0;i--)
{
listId.remove(i);
}
}
function updateList(listId)
{
clearList(listId); //clear the list first
var str = xmlHttp.responseText.split("#");
var subStr;
var option = null;
for(i=0;i<str.length-1;i++)
{
subStr = str.split("*");
var option = document.createElement("OPTION");
option.text = subStr[1];
option.value = subStr[0];
listId.options.add(option);
}
}
And these methods will be triggered once the drop-down list is changed. The code will be like this:
<select id="<portlet:namespace />provinceId" name="<portlet:namespace />provinceId" onchange="changeCity(this.value);">
<table>
<tr>
<td>
<select id="<portlet:namespace />provinceId" name="<portlet:namespace />provinceId" onchange="changeCity(this.value);">
<option value=""><%=LanguageUtil.get(pageContext, "choose-province")%></option>
<%
List provinces = ProvinceLocalServiceUtil.getProvinces();
for (int i = 0; i < provinces.size(); i++) {
Province province = (Province)provinces.get(i);
%>
<option value="<%= province.getProvinceId() %>"><%= LanguageUtil.get(pageContext, province.getProvinceName()) %></option>
<%
}
%>
</select>
</td>
<td style="padding-left: 30px;"></td>
<td>
<select id="<portlet:namespace />cityId" name="<portlet:namespace />cityId" onchange="changeArea(this.value);">
<option value=""><%=LanguageUtil.get(pageContext, "choose-city")%></option>
</select>
</td>
<td style="padding-left: 30px;"></td>
<td>
<select id="<portlet:namespace />areaId" name="<portlet:namespace />areaId">
<option value=""><%=LanguageUtil.get(pageContext, "choose-county")%></option>
</select>
</td>
</tr>
</table>
and in /html/portlet/ext/ajaxServer/dynamicSelect_City.jsp, you can do what you want, and do not forget to return the corrected text. I can show you below:
<%
String cityName = null;
String cityId;
City city = null;
String message = " " + "*" + " " + "#";
String provinceId = request.getParameter("provinceId");
if(!("".equals(provinceId) || provinceId == null)){
List cities = CityLocalServiceUtil.getCities(provinceId);
for(int i=0; i < cities.size(); i++){
city = (City)cities.get(i);
cityName = city.getCityName();
cityId = city.getCityId();
message += cityId + "*" + cityName + "#";
}
}
out.println(message);
%>
