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

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" 的元素（它们都是相同的元素，但位于页面内的不同面板中）并且我的请求有效并很好地处理数据，但由于某种原因，它只填充了一个元素。其他人不填写请求的数据。这可能是什么原因？提前谢谢大家。

Answer 1

Try This:

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

Answer 2

很可能是因为您多次使用 标识符 #list_countries。最好使用 class 选择器或 unical ids:

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

Answer 3

您正在使用的选择器告诉 jQuery 在内部使用本机 document.getElementById() 方法来获取 DOM wich returns 只有第一个节点 出现在与选择器匹配的页面中，而不考虑具有相同 ID 的任何其他节点。因此，您必须强制 jQuery 到不使用本机 document.getElementById() 方法，这里有一个技巧：

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

注意 #list_countries 之前的 body，这里我们强制它使用 Sizzle 来完成这项工作，而不是 document.getElementById() 方法。

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

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

Can I use only one request to fill the same html element?

javascript

ajax

user-interface

request

elements