jQuery - AJAX 级联变动

此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 ：

当第一个下拉框变动时，第二个下拉列表框中也将会随之变动。

JSP：

---------------------------------------------------

<tr
onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#f0f7ff'"
onmouseout="this.style.backgroundColor=currentcolor">
<td width="10%" class="main_matter_td">
文件：
</td>
<td width="40%" align="left" class="main_matter_td">
<div align="left">
<span class="STYLE1"><input type="file" name="upfile"
id="upfile" />&nbsp; </span>
</div>
</td>
<td align="left" class="main_matter_td" width="10%">
<a href="#" onclick="QueryAllBaseversionByDid();"> 标准</a></td>   //此处定义是为了在第二个下拉列表框中加入value=0 “无” 选项
<td align="left" width="40%" class="main_matter_td">
<!--先选择监测场所，再选择对应的标准-->
<select name="Did" id="Did" style="width: 150px;" onchange="QueryAllBaseversionByDid();"> // 通过name=DId的数值 在action中进行查询 并将数据返回
<option value="0" >选择监测场所</option>
<c:forEach items="${listb}" var="bentity" varStatus="ss">
<option title=${bentity.name} value="${bentity.id}" title="${bentity.name}">
${bentity.name}
</option>
</c:forEach>
</select>
<select name="standardNum" id="standardNum" style="width: 150px;">                               // 这是第二个下拉列表框 用于接收第一个列边框变动的结果
<option value="0" >选择应用标准</option>
</select>
</td>
</tr>

--------

<script type="text/javascript">
function QueryAllBaseversionByDid()
{
var id = $('#Did').val();
var url_check = "../Baseelement/QueryAllBaseversionByDid.action";          // 调用的ACTION 
// alert(id);
$.ajax({
type:"post",                                                                                          // 传送方式 // 调用的ACTION地址

url:url_check, 
data:"id="+id,                                                                                        // 传送的参数  id
success:function(msg){
var standardNum = $('#standardNum').empty();                                         // 使用 empty() 方法从元素移除内容。
// alert(standardNum);
standardNum.append("<option value=0 >选择对应的标准--</option>");          // 将数据加入到第二个下拉列表中
var list = eval("("+msg+")");
for(var i=0; i<list.length; i++){
standardNum.append("<option value="+list[i][0]+" title="+list[i][1]+">"+list[i][1]+"</option>");      
}
}
})

}
</script>

-----------------------------

action中方法

/**
* 查看场所对应的标准版本
* @return
*/
public String QueryAllBaseversionByDid()
{
Integer bid = Integer.parseInt(get("id").toString());
//this.getRequest().setAttribute("list", this.bscs.QueryAllBaseversionByDid(bid));
this.remove("id");
this.put("list", this.bscs.QueryAllBaseversionByDid(bid));
// return Action.SUCCESS;
return null;
}

//  xml配置文档        这里是重点  重点在于：返回的数据时JSON2  这是之前没有接触的  要牢记

<!-- 查看场所对应的标准版本 -->
<action name="QueryAllBaseversionByDid" class="com.hsms.Action.BaseSysConfigAction.BaseSysConfigAction" method="QueryAllBaseversionByDid" >
<result name="success" type="json2"></result>
</action>

-----

impl中方法QueryAllBaseversionByDid(bid）

public List<Baseversion> QueryAllBaseversionByDid(Integer bid)
{

return baseversionDao.getEm().createQuery("select id,beid from Baseversion where bid=?1 and pid=0").setParameter(1, bid).getResultList();

}

-------------------------------------------------------