0

我有一个页面，其中有几个 Option 元素的 Value 指向外部页面。我的目标是使用 Ajax 提取所选选项的值并使用它从外部页面加载内容。例如，当用户选择 Volleyball 时，我将获取 '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 块是空的。

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

4

3 回答 3

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) 的内容加载到调用它的元素 ( #center) 中。

于 2012-04-16T10:17:43.447 回答
0 
$("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");
    }
});
于 2012-04-16T09:43:57.560 回答
0

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

var extractedContent = $('<div />').html(data).find('#catalog').html();
console.log(extractedContent);
$("#center").html(extractedContent);
于 2012-04-16T09:57:17.457 回答