動態新增刪除Option達到二級聯動
一Java程式碼:
1.獲得一級類別資訊
private void getParentType(CoKccouForm thisForm,HttpServletRequest request, HttpServletResponse response,String deptId)
throws Exception {
try {
if (this.coKccouService == null) {
this.coKccouService = SpringContextHolder.getBean("coKccouService");
}
List<KccoTypeEntity> list = coKccouService.getParentType(deptId);
request.setAttribute("parentType", list);
} catch (Exception e1) {
e1.printStackTrace();
}
}
2.獲得二級類別資訊
private void getTwoType(CoKccouForm thisForm,
HttpServletRequest request, HttpServletResponse response,String deptId)
throws Exception {
try {
if (this.coKccouService == null) {
this.coKccouService = SpringContextHolder.getBean("coKccouService");
}
List<KccoTypeEntity> list = coKccouService.getTwoType(deptId);
request.setAttribute("twoType", list);
} catch (Exception e1) {
e1.printStackTrace();
}
}
二.js程式碼:
1.將二級類別資訊存到陣列中:
<script language="javascript">var second = [];
<%
List twt = (List)request.getAttribute("twoType");
if(twt!=null){for(int i=0;i<twt.size();i++){
KccoTypeEntity temp=(KccoTypeEntity)twt.get(i);
String id=temp.getId().toString();
String name=temp.getTypename();
Integer parentId=temp.getParentid();
%>
second[<%=i%>] = {value:<%=id%>, text:"<%=name%>", parentId:<%=parentId%>};
<%
}
}
%>
2.動態得到二級類別
function twotype() {
var parentid = document.getElementById("kcofirtype").value;
document.getElementById("kcosectype").options.length = 1;
for (var i=0; i<second.length; i++) {
var item = second[i];
if (item.parentId == parentid) {
document.getElementById("kcosectype").options.add(new Option(item.text,item.value));
}
}
}
3.修改操作二級類別顯示已有的類別:
window.onload=function load(){
var kcofirtype = document.getElementById("kcofirtype").value;
if(kcofirtype==""||kcofirtype==null){
document.getElementById("kcosectype").options.length = 1;
}
var kcosectype = document.getElementById("kcosectype").value;
var id = document.getElementById("kcosectype");
var name = id.options[id.selectedIndex].text;
if(kcosectype==""||kcosectype==null){
document.getElementById("kcosectype").options.length = 1;
}else{
document.getElementById("kcosectype").options.length = 0;
document.getElementById("kcosectype").options.add(new Option(name,kcosectype));
}
}
三.jsp程式碼:
<table>
<tr class="table-bg">
<td width="20%" class="biaoti-2" align="right">一級分類:</td>
<td class="formword" width="30%">
<html:select name="CoKccouForm" property="kcofirtype" styleClass="" style="width:215" onchange="javascript:twotype();">
<html:option value="">--請選擇--</html:option>
<%
List pt = (List)request.getAttribute("parentType");
if(pt!=null){
for(int i=0;i<pt.size();i++){
KccoTypeEntity temp=(KccoTypeEntity)pt.get(i);
String id=temp.getId().toString();
String name=temp.getTypename();
%>
<html:option value="<%=id%>"><%=name%></html:option>
<%
}
}%></html:select>
</td>
<td width="20%" class="biaoti-2" align="right">二級分類:</td>
<td class="formword" width="30%">
<html:select name="CoKccouForm" property="kcosectype" styleClass="" style="width:215">
<html:option value="">--請選擇--</html:option>
</html:select>
</td>
</tr>
</table>
//頁面table中二級類別中的新增<%
List twot = (List)request.getAttribute("twoType");
if(twot!=null){for(int i=0;i<twot.size();i++){
KccoTypeEntity temp=(KccoTypeEntity)twot.get(i);
String id=temp.getId().toString();
String name=temp.getTypename();
%>
<html:option value="<%=id%>"><%=name%></html:option>
<%
}
} %>