1、页面
<select id="lac" name="lac" style="width:100px;vertical-align:middle;"
onchange="changeLac(this.value)">
<option value="0">选项</option>
<s:iterator value="#request.lacList">
<option value="<s:property/>">
<s:property/>
</option>
</s:iterator>
</select>
<select id="ci" name="ci" style="width:100px;vertical-align:middle;">
</select>
2、javascript
// 选择CI
function changeLac(v) {
jQuery('#lac').val(v); //让第一个下拉框保持显示选中的值
jQuery('#ci').html(""); //把ci内容设为空
var ciValue = jQuery('#ci');
ciValue.append('<option value="">选择CI</option>');
//异步请求查询ci列表的方法并返回json数组
jQuery.ajax({
url : '/demo/useranalyse/useranalyselist/fillplace.action',
type : 'post',
data : { lac : v },
dataType : 'json',
success : function (opts) {
// 单选CI
if (opts && opts.length > 0) {
var html = [];
for (var i = 0; i < opts.length; i++) {
html.push('<option value="'+opts[i].value+'">'+opts[i].text+'</option>');
}
ciValue.append(html.join(''));
}
}
});
}
3、后台(页面中的lac、ci作为参数都封装到form中了)
//查询lac列表,放到request中
public void queryLacList() throws Exception{
lacList = userAnalyseDao.getLacList();
request.put("lacList", lacList);
}
/**
* ajax请求
* @return
* @throws Exception
*/
@Action(value = "fillplace")
public String fillplace() throws Exception {
//查询ci列表,转为OptionBean类型
List<OptionBean> list = userAnalyseDao.getPlaceCell(form);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
//转化为Json数组的形式
JSONArray array = JSONArray.fromObject(list);
writer.append(array.toString());
return null;
}
//HTML页面共用的选项元素对象模型
public class OptionBean {
// 选项值
private String value;
// 选项文本
private String text;
// 是否被选中
private boolean selected;
public OptionBean() {
}
public OptionBean(String name) {
this.value = this.text = name;
}
public OptionBean(String value, String text) {
this.value = value;
this.text = text;
}
public OptionBean(String value, String text, boolean selected) {
this.value = value;
this.text = text;
this.selected = selected;
}
//getter setter
//...
}
分享到:
相关推荐
AJAX级联下拉框源码 AJAX级联下拉框源码 AJAX级联下拉框源码
使用ajax和servlet实现两级下拉框的动态级联
ajax实现可配置无刷新级联下拉框...
AJAX实现级联下拉框 需要的JAVA类,大家可以学习下
使用thinkphp框架做出的一个简单的ajax实现的无限添加级联下拉框的例子,ajax写的还可以,比价清晰
这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。
本篇文章主要是对AJAX级联下拉框的简单实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框
使用ajax+struts2.0+jsp做的一个多下拉列表级联
AJAX-DWR下拉框级联AJAX-DWR下拉框级联 真正实用的`仅供参考
这是我在网上查找到的php实现三级级联下拉框的资料,共享个大家,大家一起进步,具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">...
Ajax_实现下拉框的联动效果(详细注释) 有源码程序
Ajax+Json 级联菜单实现代码,需要的朋友可以参考下。
功能:选中第一个下拉框,局部刷新第二个下拉框的值,且每次选中第一个下拉框,第二个下拉框都会有对应的值提供选择。主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的...
jQuery带搜索功能的下拉框,可以动态添加数据,实现级联效果。效果图参看博客:https://blog.csdn.net/BigBoySunshine/article/details/88293931
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 级联下拉框id casDefVal: ['全国', 5, '益阳', 22], // 级联默认值(Id,Name都可以) }); }); html: <h2> 省级联动 ...
刚学dwr 自己写的三级联动下拉框 DWR版本 3.0 数据库 Ms SQL 2005 环境 Myeclipse 8.x 有问题联系 :Mr .陈 MSN czw30110@hotmail.com