前端HTML+JS实现四级联动

第一次写博客，为了更好的记录自己做项目遇到的问题和解决方法。
最近在做一个项目，其中一个功能需要实现四级联动。联动功能是一个比较常用的功能，实现的方式有很多，下面分享一个比较清晰简单的方法。
实现效果如下：

一、JS代码

var xmlHttp;
var selId;
//创建一个xmlHttp 对象
function createXMLHttpRequest(){
if(window.ActiveXObject){//检查浏览器是否支持 XMLHttpRequest 对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//不支持 创建
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//支持 直接new
}
}
//选这个option后 想要的option能级联
function getOptionById(val){
var url="${ctx}/business/screening/ziji.action?";
var data="parentId="+val.value;        //传入后台的参数
selId=val.id;
ajaxRequest(url,data,responseData);    //实质要调用的ajax的函数
}
//ajaxRequest是将请求发送到后台的function
function ajaxRequest(url,data,responseResult){
createXMLHttpRequest();//调用 创建一个XMLHttpRequest对象
xmlHttp.open("POST",url,true);//规定请求的类型（post）、URL 以及是否异步处理请求（是）
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//类似HTML 表单那样 POST 数据 的http头
xmlHttp.onreadystatechange = responseResult;//规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
xmlHttp.send(data);//发送数据
}
//后台响应完成后执行的function
function responseData(){
    if(xmlHttp.readyState == 4){//4表示请求已完成 ，响应已就绪
    if(xmlHttp.status == 200){//表示ok
    var message=xmlHttp.responseText;//为后台返回过来的文本
    var num =1;
    if(message=="null"){//若没有返回任何信息
        document.getElementById(""+selId+num+"").options.length=1;   //把id='id'的option下拉框置空
    return false;
    }
    else{
     var info2 =eval("("+message+")");  //解析一下json字符串
     document.getElementById(""+selId+num+"").options.length=1;   //把id='id'的option下拉框置空
    $.each(info2, function(i,n){
        $("#"+selId+num+"").append($('<option value="'+i+'">'+n+'</option>'));      //后台数据加到下拉框

    });
     } 
    }
    }
}

二、HTML代码

<tr>
           <td class="columnTitle_mustbe">风险大类ID：</td>
           <td class="tableContent">
           <select name="sel1"  id="sel1"  class="select_field" onchange="getOptionById(this)">
                <option value="">-请选择-</option>
                <c:forEach items="${riskStockDaLei}" var="o" varStatus="status">
                    <option value="${o.id}">${o.name}</option>
                </c:forEach>
            </select><font> * </font>
           </td>
       </tr>
       <tr>
           <td class="columnTitle_mustbe">风险专项ID：</td>
           <td class="tableContent">
           <select name="sel11" id="sel11" class="select_field" onchange="getOptionById(this)">
                <option value="">请选择</option>
            </select><font> * </font>
           </td>
       </tr>
        <tr>
           <td class="columnTitle_mustbe">风险分项ID：</td>
           <td class="tableContent">
           <select name="sel111"  id="sel111" class="select_field" onchange="getOptionById(this)">
                 <option value="">-请选择-</option>
            </select><font> * </font>
           </td>
       </tr>
        <tr>
           <td class="columnTitle_mustbe">风险描述ID：</td>
           <td class="tableContent">
           <select name="sel1111"  id="sel1111" class="select_field" onchange="getOptionById(this)">
                 <option value="">-请选择-</option>
            </select><font> * </font>
           </td>
       </tr>