根据在第一个下拉菜单中选择的值填充第二个下拉菜单中的值

Question

第二个下拉列表中没有填充数据。

第一个下拉菜单的Jsp代码：

    <div id="search_by_pi" style="display:none;"> 
      <div class="col-1">
        <label for="piname" >Select PI Name</label>
      </div>
      <div class="col-2">
        <select required name="piName" ><!-- onchange="repotOnchangepi(this.value);" -->
          <option selected="selected" disabled="disabled">--SELECT--</option>
          <c:forEach var="PIUsersName" items="${PIUsersList}">
            <option><c:out value="${PIUsersName}" /></option>       
          </c:forEach>
        </select>
      </div>

第二个下拉菜单的Jspcode：

    <div class="col-1">
      <label for="piStudy_name"  style="margin-left:-130px">Select PI Study</label>
    </div>
    <div class="col-2">
      <select required name="studyName"  style="margin-left:-180px" path="piname" id="pistudy">
        <option value="-1" label="--SELECT--"/> 
      </select>
    </div>
    </div>

第二个下拉菜单的控制器类：

@RequestMapping(value = "/categories/{piName}", method = RequestMethod.GET)
    public @ResponseBody  List<StudyDtls> findBypiname(@PathVariable("piName") String piname) {
        return adminservice.getPiStudDtlsList(piname);
    }

用于填充第二个下拉列表的Ajax代码：

("#search_by_pi").change(function(){

    var piName = $(this).val();
    $.ajax({
        type: 'GET',
        url: "/studies/" + piName,
        data: {"piName" : piName},
        success: function(data){
            var slctSubcat=$('#pistudy'), option="",i;
            slctSubcat.empty();
           for(i=0; i<data.length; i++)
            {
                option = option + "<option value='"+data[i].id + "'>"+data[i].studyName + "</option>";
            }
            slctSubcat.append(option);
        },
        error:function(){
            alert("error");
        }
    });
});