做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面。考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框所有清除,然后又一次拼接刷新的内容。用JQuery实现比較easy,代码以省市联动效果为例实现。

JSP页面代码例如以下:

<li id="base">
<p>生源地:</p>
<label>
<select id="provinceCode" name="provinceCode" onchange="refreshCity()">
<option value="">所有</option>
<c:forEach items="${provinceInfoList}" var="provinceInfo">
<option value="${provinceInfo.code}">${provinceInfo.provinceName}</option>
</c:forEach>
</select>
</label>
</li>

JavaScript代码例如以下:

function refreshCity(){
if($('#provinceCode').find('option:selected').val() == ""){
$('#provinceCode').parent().nextAll('lable').remove();
return;
}
//省份名称
var provinceName = $('#provinceCode').find('option:selected').text();
provinceName = provinceName.substring(0,provinceName.length-4);
// 发出Json请求,查询子下拉框选项数据
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// 假设有子选项,则创建子下拉框
if(data != null){
// 删除下拉框父级<lable>后的全部同级<lable>
$('#provinceCode').parent().nextAll('lable').remove();
var childId = "city";
// 推断是否存在下一级下拉框 不存在就创建
if($('#'+childId).length == 0){
// 创建一个<li>并创建一个<select>加入到id为extra的<ul>中
$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base'));
}else{
//清空子下拉框内容
$('#' + childId).empty();
}
// 遍历json串,填充子下拉框
$.each(data.city, function(i, item) {
$('#' + childId).append(
"<option value='"+item.code+"'>" + item.nameAndCode
+ "</option>");
});
}
});
}

依据省份获取市的代码例如以下:

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");
// 初始化准备输出的Json串
String cityJson = "";
// 遍历集合,构造json串
if (cityList.size() > 0) {
cityJson = "{\"city\":[";
// 拼接查询到的子项
for (int i = 0; i < cityList.size(); i++) {
CityInfo city = cityList.get(i);
String temp = "{\"code\":\"" + city.getCode()
+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"
+ "\"}";
// 假设是集合中最后一项,则拼接结束符,否则用","隔开
if (i == cityList.size() - 1) {
cityJson = cityJson + temp + "]}";
} else {
cityJson = cityJson + temp + ",";
}
}
}
// 设置输出的字符集和类型并输出json串
response.setCharacterEncoding("UTF-8");
response.setContentType("json");
response.getWriter().print(cityJson);
}

JQuery打造下拉框联动效果的更多相关文章

  1. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

  2. Easyui多个下拉框联动效果

    好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做 eayui的combobox  有onSelect ...

  3. jquery 实现层级下拉框联动效果 代码

    <select name="fCareId" id="fCareId"> <option selected="selected&qu ...

  4. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  5. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  6. SSM框架,在Html界面利用ajax,json,jQuery实现省市区下拉框联动

    1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

  7. Java Swing应用程序 JComboBox下拉框联动查询

    在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...

  8. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  9. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

随机推荐

  1. linux下实现自己的shell解释器

    实现一个自己的shell解释器,其原理比较简单,首先获取用户的输入,通过fork()函数获取两个进程(父子进程),子进程通过execvp()函数继续进行,此时父进程一直在等待子进程的结束,待都结束了就 ...

  2. vs2005 测试 lua环境

    (1)添加文件核路径 (2)库文件路径 (3)main.cpp #include <stdio.h>#include <string.h> extern "C&quo ...

  3. rdlc部署zt

    原文:rdlc部署zt 偶然间遇到“ 未能加载文件或程序集microsoft.reportviewer.winforms ……”的一个错误,以前web是遇到过,没想到winform部署也会遇到.找了半 ...

  4. JavaEE Tutorials (21) - Java EE安全:高级主题

    21.1使用数字证书331 21.1.1创建服务器证书332 21.1.2向证书安全域增加用户334 21.1.3为GlassFish服务器使用一个不同的服务器证书33421.2认证机制335 21. ...

  5. html表单提交的几种方法

    原文地址:http://www.ijser.cn/?p=34 最普通最经常使用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” ...

  6. Egret初体验–躲避类小游戏

    下面简单介绍一下我这个游戏:基本上就3个画面(准备再添加一个胜利的界面)开始画面,一个按钮,点击进入游戏游戏画面,滚动的背景,触摸移动的老鹰,从天而降的翔,以及右上角的时间条结束画面,显示结果,关注按 ...

  7. vertical-align:middle的居中细节调整

    使用vertical-align:middle可以让行级元素垂直居中,但这个居中是以文字的中线来计算的,而文字的中线在不同的字体上不同,甚至相同的字体在不同的浏览器上显示的都不同.所以直接使用vert ...

  8. php获取文章内容中的全部图片数组

    <?php $pattern="/<img.*?src=[\'|\"](.*?(?:[\.gif|\.jpg]))[\'|\"].*?[\/]?>/&q ...

  9. 使用VC++通过远程进程注入来实现HOOK指定进程的某个API

    前阵子读到一篇关于<HOOK API入门之Hook自己程序的MessageBoxW>的博客,博客地址:http://blog.csdn.net/friendan/article/detai ...

  10. 边缘检测之Sobel检测算子

    在讨论边缘算子之前,首先给出一些术语的定义: (1)边缘:灰度或结构等信息的突变处,边缘是一个区域的结束,也是另一个区域的开始,利用该特征可以分割图像. (2)边缘点:图像中具有坐标[x,y],且处在 ...