Question

我正在使用ajax向网络服务发出请求。

$(document).ready(function(e) {
    var token = "123";
      $.ajax({  
        type: "POST", //REQUEST TYPE
        dataType: "json", //RESPONSE TYPE
        url: "http://ws/mehtod"+token, 
        success: function(data) {
            console.log(data);
            $.each(data, function(i) {
                    $('#list_countries').append("<option>" + data[i].Name + "</option>"); //fILL THE DDL. FOR EACH ITEM RETURNED ADD DATA[NAME] TO ONE LINE OF THE DDL.-
            });
        },
        error: function(err) {
            console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
        }
    }).always(function(jqXHR, textStatus) {
        if (textStatus != "success") {
            alert("Error: " + jqXHR.statusText);
        }
    })
});

问题是：我的html中有多个元素具有ID“list_countries”（它们都是相同的元素，但在页面内的不同面板中）并且我的rerquest工作并且很好地处理数据但是对于某些因为它只填充其中一个元素。其他人没有填写所要求的数据。这可能是什么原因？提前谢谢大家。

Answer 1

试试这个：

$('#list_countries').each(function() {
    $(this).append("<option>" + data[i].Name + "</option>");
});

Answer 2

最有可能的原因是您多次使用标识符#list_countries 。更好地使用类选择器或unical id：

$('#list_countries, #list_countries_2, #list_countries_3');
// or
$('.list_countries');

Answer 3

您正在使用的选择器告诉jQuery以内部方式使用本机document.getElementById()方法来获取DOM，它返回仅第一个节点，它出现在与选择器匹配的页面中到具有相同ID的任何其他节点。所以，你必须强制执行jQuery到 NOT 使用原生的document.getElementById()方法，这里有一个技巧：

$.each(data, function(i) {
    $('body #list_countries').append("<option>" + data[i].Name + "</option>");
});

请注意body之前的#list_countries，此处我们强制使用Sizzle代替此document.getElementById()方法。

PS：我强烈建议您对不同的元素使用相同的class，而不是页面中必须唯一的ID。

我可以只使用一个请求来填充相同的html元素吗？

3 个答案: