在servlet中利用两个select联动以此来选择籍贯
时间: 2024-06-12 22:08:09 浏览: 93
可以通过以下步骤实现在servlet中利用两个select联动以此来选择籍贯:
1. 创建两个select标签,一个用于选择省份,一个用于选择城市。在jsp页面中,可以使用如下代码创建select标签:
```
省份<select name="province" id="province">
<option value="">请选择省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
</select>
城市<select name="city" id="city">
<option value="">请选择城市</option>
</select>
```
2. 在jsp页面中,使用JavaScript代码实现select标签的联动。当选择省份时,根据选择的省份动态加载相应的城市信息。可以使用如下代码实现:
```
<script type="text/javascript">
$(function(){
$("#province").change(function(){
var province = $(this).val();
$.ajax({
url:"/city",
type:"post",
data:{province:province},
dataType:"json",
success:function(data){
var city = $("#city");
city.empty();
$.each(data,function(index,item){
city.append("<option value='"+item+"'>"+item+"</option>");
});
},
error:function(){
alert("请求失败!");
}
});
});
});
</script>
```
3. 在servlet中,根据选择的省份返回相应的城市信息。可以使用如下代码实现:
```
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String province = request.getParameter("province");
List<String> cityList = new ArrayList<String>();
if("北京".equals(province)){
cityList.add("东城区");
cityList.add("西城区");
cityList.add("朝阳区");
cityList.add("海淀区");
}else if("上海".equals(province)){
cityList.add("黄浦区");
cityList.add("卢湾区");
cityList.add("徐汇区");
cityList.add("长宁区");
}else if("广东".equals(province)){
cityList.add("广州市");
cityList.add("深圳市");
cityList.add("珠海市");
cityList.add("汕头市");
}else if("江苏".equals(province)){
cityList.add("南京市");
cityList.add("无锡市");
cityList.add("徐州市");
cityList.add("常州市");
}else if("浙江".equals(province)){
cityList.add("杭州市");
cityList.add("宁波市");
cityList.add("温州市");
cityList.add("嘉兴市");
}
Gson gson = new Gson();
String json = gson.toJson(cityList);
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
}
```
在这个servlet中,根据选择的省份返回相应的城市信息,然后将城市信息转换为json格式返回到前端页面。在前端页面中,根据返回的城市信息动态更新城市select标签的内容。这样,就实现了在servlet中利用两个select联动以此来选择籍贯的功能。
阅读全文