js,jquery 级联修改下拉框

下拉框

                  <div class="form-group">
                    <label>一级目录</label>
                    <select class="form-control"  onchange="change()"
                     id="cId" name="cId">
                     <c:forEach items="${cs}" var="c">
                     	<option value="${c.id }">${c.name }</option>
                     </c:forEach>                   
                    </select>
                  </div>
                  <div class="form-group">
                    <label>二级目录</label>
                    <select class="form-control" id="id" name="id">
                                      
                    </select>
                  </div>

change函数

 function change(){
		var cId = $('#cId option:selected').val();
		 $("#id").html("");
	     var cId2;
		<c:forEach items="${ss}"  var="s">		
			cId2="${s.cId}";
			 if(cId==cId2 ){
				$("#id").append("<option value='${s.id}'>${s.name}</option>"); 			
			 } 
		</c:forEach> 	    
}