Question

我有一个小型网络应用，我需要在之前选择另一个之后填充下拉列表。

例如，这是Ajax请求http://localhost:8080/ajax/dropdown_model?brandId=0的URL，JSON代码如下所示：

[{"id":0,"name":"Z-400","brand":{"id":0,"name":"Lenovo"}}]

我使用的代码就是这个：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script type="text/javascript">
     var html = '';
     $('select#brand').change(
        function() {
            $.getJSON("http://localhost:8080/ajax/dropdown_model", {
                brandId : $(this).val(),
                ajax : 'true'
            }, function(data) {
                html = '<option disabled="disabled" value="">Seleccionar modelo:</option>';
                var len = data.length;
                for ( var i = 0; i < len; i++) {
                    html += '<option value="' + data[i].id + '">'
                           data[i].id + ' : ' + data[i].name + '</option>';
                }
                html += '</option>';
                $('select#model').html(html);
            });
        }); </script>

它应该替换第二个选择标记的内容，并在其中添加JSON字符串的内容。这也是表格的相关部分（我使用的是Spring和Thymeleaf）：

<div class="brand" th:object="${lbra}">
           <select name="brand" id="brand" >
        <option value="">Seleccionar marca:</option>
        <option th:each="brand : ${lbra}"
                th:value="${brand.getId()}"
                th:text="${brand.getId()}+' : '+${brand.getName()}"></option>
    </select>   </div>

      <div class="model" id="modellist">
           <select name="model" id="model">
        <option value="" disabled="disabled" selected="selected">Seleccionar modelo:</option>
        <option></option>
    </select>   </div>

Answer 1

为了创建示例，我删除了一些Spring变量。在添加到HTML字符串的动态选项后（html += '<option value="' + data[i].id + '">'之后），您错过了一个“+”..

var html = '';
$('select#brand').change(
  function() {
    $.getJSON("https://api.myjson.com/bins/ugf4v", {
      brandId: $(this).val(),
      ajax: 'true'
    }, function(data) {
      html = '<option disabled="disabled" value="">Seleccionar modelo:</option>';
      var len = data.length;         
      for (var i = 0; i < len; i++) {
        html += '<option value="' + data[i].id + '">' +
          data[i].id + ' : ' + data[i].name + '</option>';
      }
      html += '</option>';
      $('select#model').html(html);
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brand">
  <select name="brand" id="brand">
        <option value="">Seleccionar marca:</option>
        <option>Test Change</option>
   </select>
</div>

<div class="model" id="modellist">
  <select name="model" id="model">
        <option value="" disabled="disabled" selected="selected">Seleccionar modelo:</option>
        <option></option>
    </select>
</div>

如何使用$ .getJSON从数组中检索数据？

1 个答案: