1、页面
2、javascript
3、后台(页面中的lac、ci作为参数都封装到form中了)
<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
//...
}