ajax应用之多级联动菜单-优快云博客

本文介绍如何利用jQuery和Ajax技术实现网页中下拉框的联动效果，并展示了具体的HTML结构、JavaScript代码及后台处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、主画面的代码

<form name="form1" method="post" action="">
<table width="780" border="0" class="its" align="center">
<thead>
  <tr>
    <th>测试</th>
    <th>测试</th>
    <th>date</th>
  </tr>
  <tr>
    <td>  
  <select name="big" id="big">
    <option value="1">item1</option>
    <option value="2">item2</option>
    <option value="3">item3</option>
    <option value="4">item4</option>
  </select>
  </td>
    <td>
    <span id="quote">
		<select name="small" id="small">
		<option value="">——小类——</option>
		</select>
	</span>
    </td>
    <td> </td>
  </tr>
</table>
</form>
<script language="javascript">
$("#big").change(function(){ 
$("#quote").load("newsList.do?action=ajaxTest&id="+$("#big").val()); 
});
</script>

2、处理的action

	public ActionForward ajaxTest(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		String id=request.getParameter("id");
		String out="<select name=\"small\" id=\"small\">";
		out+="<option value=\"\">——"+id+"类——</option>";
		out+="</select>";
		try {
			response.setCharacterEncoding("GBK");//如果有乱码就加上这行
			response.getWriter().print(out);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

这里我用了jquery，ajax开发就简化了很多，完~