Ajaxによるプルダウンカスケード連動
4024 ワード
最近開発されたシステムでは、コンテンツプロバイダとコンテンツプロバイダのアプリケーションをカスケードする必要があるなど、作業ニーズにおいて、ドロップダウン・ボックス・カスケード連動を実現することがしばしば必要である.ファイルcpRelevanceAppを作成します.jspファイル、具体的なコードは以下の通りです.
JSPページに追加し、
.
ACTIONレイヤに、次のコードを追加します.
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld"%>
<%@ taglib prefix="lz" uri="http://www.lazy3q.com/web/lazy3q.tld"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="/WEB-INF/tld/fmt.tld"%>
<div class="searchCondition formRow">
<label>CPID:</label>
<select id="cpId" name="cpId" cpId="${cpId}" data-placeholder="CPID" class="select" tabindex="2" style="width:167px;">
<option value=''>-- --</option>
<c:forEach var="item" items="${cpList}" varStatus="i">
<option value="${item.id}" <c:if test="${item.id == cpId}">selected</c:if>>${item.shortName}</option>
</c:forEach>
</select>
</div>
<div class="searchCondition formRow">
<label>APPID:</label>
<select id="appId" name="appId" appId="${appId}" data-placeholder="APPID" class="select" tabindex="3" style="width:167px;">
<option value=''>-- --</option>
</select>
</div>
<script>
$(document).ready(function() {
$("#cpId").change(function() {
var cpId = $(this).children('option:selected').val();
if (cpId != '') {
selectApp(cpId);
} else {
$("#appId").html("<option value=''>-- --</option>");
$.chosenUpd("#appId");
}
})
var cpId = $("#cpId").children('option:selected').val();
if (cpId != '') {
selectApp(cpId);
}
});
function selectApp(cpId) {
$.ajax({
type : "get",
url : "/classification/census/cp_jqueryApp.do",
cache : false,
data : {
cpId : cpId
},
success : function(resp) {
var h = '<option value="">-- --</option>';
if (resp != null) {
for ( var i = 0; i < resp.length; i++) {
if (resp[i].appId == $("#appId").attr("appId")) {
h += '<option value="' + resp[i].appId + '" selected>' + resp[i].appName + '</option>';
} else {
h += '<option value="' + resp[i].appId + '" >' + resp[i].appName + '</option>';
}
}
}
$("#appId").html(h);
$.chosenUpd("#appId");
}
});
}
</script>
JSPページに追加し、
<%@include file="/WEB-INF/jsp/fragmentary/cpRelevanceApp.jsp"%>
.
ACTIONレイヤに、次のコードを追加します.
public void jqueryApp(){
Map<String, Object> condition = new HashMap<String, Object>();
condition.put("cpId", $.GetRequest("cpId"));
List<TblAppInfo> appList = tblAppInfoService.getList(condition);
try {
echoJson(ServletActionContext.getResponse(), JSON.toJSONString(appList));
} catch (IOException e) {
e.printStackTrace();
}
}