0

selectboxのオプションに基づいて別のページからdivにコンテンツをロードするスクリプトがあります。コンテンツがdivにロードされたときにスライド効果を追加することが可能であれば、私は負傷します。

スクリプトは次のようになります。

$(document).ready(function(){ 
    $("#selectbox").change(function(){ 
    var selectedOption = $('#selectbox :selected').val(); 
    $containerDiv = $('#div_that_recieves_content'); 
    $containerDiv.html("");
            switch (selectedOption)
            {
            case "Option1":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            case "Option2":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            case "Option3":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            }
    return true;
    }); 
});

ありがとう。

4

1 に答える 1

1

The callback of load() fires when the new content is available. You could hide container before the AJAX, and slide it down once AJAX is complete

$containerDiv.html("").hide();

Then in switch you would do better to only use cases to define URL, and only call load() once:

var url;
switch (selectedOption) {
        case "Option1": url= "page.html #div";break;
        case "Option2": url= "page.html #div";break;
        case "Option3": url="page.html #div" ;break;
}

$containerDiv.load( url , function(){
    /* new content exists, can display it now*/
     $(this).slideDown();
     /* no idea what "reload" does.. if it affects "$containerDiv" may need to do slideDown in that handler*/
     $(document).trigger("reload");

});
于 2013-01-02T21:55:11.610 に答える