下拉填充ajax

Question

我有以下问题：当我从下拉列表中选择一个元素时，我想通过 ajax 自动填充另一个下拉列表。这个想法是，选择“类型”后，子类别（sub_type）不会加载。

HTML
<select id="type" name="type">
<option value="1">General</option>
<option value="2">Test</option>
</select>
<select id="sub_type" name="sub_type">
</select>


SCRIPT
    $("#type").change(function(){
    $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id+ '">' + j[i].name+ '</option>';
          }
        });
    $("#sub_type").html(options);
    });

我的 ajax 脚本返回：

[{id: 0, name: 'Mark'}, {id:1, name: 'Andy'}, {id:2, name: 'Richard'}]

但子类别（第二个选择）未加载。

Answer 1

假设确实调用了 Ajax success 函数，请将函数代码更改为：

          var $subType = $("#sub_type");
          $subType.empty();
          $.each(j, function () {
            $subType.append($('<option></option>').attr("value", this.id).text(this.name));
          });

您当前的主要问题是：

• html 函数仅被调用一次，因为它位于 success 函数之外。
• Ajax 数据中的元素具有键 id 和 name，而不是 optionValue 和 optionDisplay

更新：

返回的 JSON 无效。字符串必须用双引号引起来，而不是单引号。因此，getJSON() 调用会默默失败。

Answer 2

问题是，您在 ajax JSON 调用之后立即将 html 分配给 #sub_type 。您应该在 ajax 回调函数中分配它，如下所示：

$("#type").change(function(){
  $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
    }
    $("#sub_type").html(options);
  });    
});