动态添加删除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>

<%

}

} %>