ajax实现动态级联下拉框

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
//...

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值