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

}

评论

2 楼 无双Rama 2015-03-15  

chengxiaohu66 写道

请问能发下userAnalyseDao方法吗

就是普通的查询列表啊，可以是原生的sql，也可以是采用ORM框架的接口

1 楼 chengxiaohu66 2014-08-16  

请问能发下userAnalyseDao方法吗