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" /> </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();
}
-------------------------------------------------------
