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 回答