二级联动：如何根据一级<select>标签的值去后台查询回显二级<select>中？

jsp:选择区域负责人之后，根据其value中的userid去后台操作数据库查询其手下所有的促销主管，并回显在super3的<select>标签中可供继续选择，用js或jquery操作ajax，前端代码应该怎么写？

               <select name="super2" id="super2" >
                      <option value="">区域负责人</option>
                      <c:forEach  var="item" items="${entity}">
                        <option value="${item.userId }">${item.realName }</option>
                      </c:forEach>
                         </select>
               
                     <select name="super3" id="super3" >
                      <option value="">促销主管</option>
                      <c:forEach  var="item" items="${entity}">
                        <option value="${item.userId }">${item.realName }</option>
                      </c:forEach>
                 </select>
                 

---

给第一级select绑定change事件，在里面通过ajax更新第二级select的值

。。。以此类推

---

$("#super2").change(function(){
    var id = $(this).val();
    //未对 id 值为 "" 和 Number 进行区分判断.
    $.post(url, {"id_jsp": id}, function(data, status){
        if (status == "success") {
            $("#super3 option:not(:first)").remove();
            for (var i = 0; i<data.length; ++i){
                $("#super3").append("<option value=" + data[i].userId + ">" + data[i].realName + "</option>");
            }                    
        }
    })
});

未经测试。。可能有bug...