jQuery的级联下拉列表将不起作用

Question

我是jquery和ajax的新手，我一直在尝试根据选择的“ bpr”填充“ agence”列表。 问题是，当我运行我的应用程序时，我可以看到从数据库（SQL Server）中检索了数据，但是“ Agence”列表仍然为空。

这是我的控制器：

@Controller
public class SgrController {
@RequestMapping("/")
public String home(Model map) {
    return "index";
}
@RequestMapping(value = "/ajoutreclamation", method = RequestMethod.GET)
public String ajoutReclamation(Model model) {

    Reclamation reclamation = new Reclamation();
    model.addAttribute("reclamation", reclamation);
    List<Bpr> bprs = metier.listObject("Bpr");
    System.out.print(bprs.size());
    model.addAttribute("bprs", bprs);
   return "ajoutreclamation";

}
@RequestMapping(value = "/agences", method = RequestMethod.GET)
public @ResponseBody
List<Agence> agences(
    @RequestParam(value = "bprr", required = true) int idBpr) {
List<Agence> agences = metier.findAgencesByBpr(idBpr);
System.out.println(agences.size());

return agences;
}
...}

我的jsp页面：

<form:form method="post" action="ajoutreclamation"
                        commandName="reclamation">
<label class="col-md-3 control-label" for="type-combo">BPR</label>
    <div class="col-md-9">
    <select class="form-control" size="1" name="vbpr" id="bprr">
        <option value="0" disabled selected>--Sélectionnez la BPR</option>
            <c:forEach items="${bprs}" var="bprs">
              <option value="${bprs.idBpr}">${bprs.libelleBpr}</option>
            </c:forEach>
    </select>
    </div>
<label class="col-md-3 control-label" for="type-combo">Agence</label>
    <div class="col-md-9">
    <select id="agence-combo" id="agc" name="agence" class="form-control" size="1">
      <option value=""></option>                                                    
    </select>
    </div>
<button type="submit" value="Submit" class="btn btn-sm btn-primary">
    <i class="fa fa-angle-right"></i> Submit </button>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
<c:url var="findAgenceBprURL" value="/agences" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#bprr').change(function() {  
            $.getJSON('${findAgenceBprURL}',
                {bprr : $(this).val(),
                 ajax : 'true'},
            function(agences) {
              var html = '<option value="">Agence</option>';
              var len = agences.length;
             for (var i = 0; i < len; i++) {
                html += '<option value="' + agences[i].idAgence + '">'
                + agences[i].libelleAgence+ '</option>';
                                            }
            html += '</option>';
           $('#agc').html(html);
            });
          });
        });
</script> 

Answer 1

您的“代理”选择控件具有两个ID属性。

<select id="agence-combo" id="agc" name="agence" class="form-control" size="1">

id="agence-combo"和id="agc"

您的JS引用$('#agc') 。 您应该删除不希望使用的ID，并相应地更新JS。

此外，在替换select元素的HTML之前，还有一个额外的<option>关闭标签。 您可以删除以下行： html += '</option>';

[编辑]

如果select元素的正确ID为agc，则更新后的代码将如下所示。

<form:form method="post" action="ajoutreclamation" commandName="reclamation">
<label class="col-md-3 control-label" for="type-combo">BPR</label>
<div class="col-md-9">
    <select class="form-control" size="1" name="vbpr" id="bprr">
        <option value="0" disabled selected>--Sélectionnez la BPR</option>
        <c:forEach items="${bprs}" var="bprs">
          <option value="${bprs.idBpr}">${bprs.libelleBpr}</option>
        </c:forEach>
    </select>
</div>
<label class="col-md-3 control-label" for="type-combo">Agence</label>
<div class="col-md-9">
    <select id="agc" name="agence" class="form-control" size="1">
      <option value=""></option>                                                    
    </select>
</div>
<button type="submit" value="Submit" class="btn btn-sm btn-primary"><i class="fa fa-angle-right"></i> Submit </button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
<c:url var="findAgenceBprURL" value="/agences" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#bprr').change(function() {  
                $.getJSON('${findAgenceBprURL}', { bprr : $(this).val(), ajax : 'true' }, function(agences) {
                var html = '<option value="">Agence</option>';
                var len = agences.length;
                for (var i = 0; i < len; i++) {
                    html += '<option value="' + agences[i].idAgence + '">'
                    + agences[i].libelleAgence+ '</option>';
                }
                $('#agc').html(html);
            });
        });
    });
</script>