1. 程式人生 > >動態新增刪除Option達到二級聯動

動態新增刪除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));
}
}

</script>


三.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>

      <%


} %>