Question

我有一个页面，其中有几个Option元素，其Value指向外部页面。我的目标是使用Ajax来提取所选择的Option＆Value;用它来加载外部页面的内容。例如。当用户选择排球时，我将获得'volleyball.html'值，使用Ajax检索该页面并将其#catalog内容加载到当前页面中。这是我的代码：

$("select").change(function(){
var selectedURL=$("option:selected",this).val();
if(selectedURL!=="Select One"){
    $("#center").html("<p class='processing'></p>");    
    $.get(selectedURL,function(data){
    var extractedContent=$("#catalog",data);
    console.log(extractedContent); //Firebug says extractedContent is '[]'
    $("#center").html(extractedContent); //Nothing is inserted inside div#content
    },"html");
}

我不擅长jQuery，并且从这里的几个帖子中获得了一些混合和匹配的代码，以便在上面得到。现在我不确定出了什么问题，但没有加载任何内容 - 应该保存提取内容的#center div块为空。

有人可以帮助我发现我上面的代码有什么问题吗？提前谢谢了。

Answer 1

load()方法非常适用于此：

$('select').change(function () {
    var selectedURL = $('option:selected', this).val();

    if (selectedURL !== 'Select One') {
        $('#center').html('<p class="processing"></p>').load(selectedURL + ' #catalog');
    }
});

它只能使用一个URL，或它可以使用一个URL后跟一个选择器，该选择器只会将匹配元素（#catalog）的内容加载到它所调用的元素中on（#center）。

Answer 2

$("select").change(function(){
    var selectedURL=$("option:selected",this).val();
    if(selectedURL!=="Select One"){
        $("#center").html("<p class='processing'></p>");    
        $.get(selectedURL,function(data){
            $("#center").html($(data).find("#catalog"));
        },"html");
    }
});

Answer 3

您不能像这样使用$('#catalog', data)。要提取内容，您可以创建一个jQuery对象，并分配返回的HTML然后从那里提取：

var extractedContent = $('<div />').html(data).find('#catalog').html();
console.log(extractedContent);
$("#center").html(extractedContent);

如何使用jQuery从使用Ajax获取的内容中提取HTML

3 个答案: