0

値が外部ページを指すオプション要素がいくつかあるページがあります。私の目的は、Ajaxを使用して、選択したオプションの値を抽出し、それを使用して外部ページからコンテンツをロードすることです。たとえば、ユーザーがバレーボールを選択すると、「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が得意ではないので、上記のいくつかの投稿から派生したコードを組み合わせて使用​​しています。何が悪かったのかわかりませんが、何もロードされていません。抽出されたコンテンツを保持するはずの#centerdivブロックは空です。

誰かが上記の私のコードの何が問題になっているのかを見つけるのを手伝ってくれませんか？よろしくお願いします。

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 に答える