下拉填充ajax

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

HTML  General Test    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 += '' + j[i].name+ ''; } }); $("#sub_type").html(options); }); 

我的ajax脚本返回：

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

但是subcathegory（secont select）并没有加载。

Answer 1

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

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

您目前的主要问题是：

• html函数只调用一次，因为它在sucess函数之外。
• Ajax数据中的元素具有键ID和名称，而不是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 += '' + j[i].name + ''; } $("#sub_type").html(options); }); });