动态添加删除Option达到二级联动

「爱情、让人受尽委屈。」 2022-08-10 13:45 137阅读 0赞

一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.将二级类别信息存到数组中：

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.οnlοad=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" οnchange="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>

\} %>