2010-12-23 76 views
3

我有一堆包含文本數據靜態HTML文件:如何使用jQuery將靜態HTML文件的內容加載到DIV中?

/a.html 
/b.html 
/c.html 

和我的主頁上選擇/下拉框(#loadExternal)。

使用jQuery,如何使用select/dropdown的onChange事件觸發相應的外部頁面加載到我的container DIV?

<html> 

<select id="loadExternal"> 
    <option id="a" value="a" selected="selected">Load a.html</option> 
    <option id="b" value="b">Load b.html</option> 
    <option id="c" value="c">Load c.html</option> 
</select> 

<div id="container"> 
</div> 

</html> 

回答

1

您可以將更改事件綁定到選擇框。獲取當前選擇的值。使用.load()事件加載頁面。

$("#loadExternal").change(function(){ 
    var pageToLoad = this.value + ".html"; 
    $("#container").load(pageToLoad); 
}); 

看到一個working demo

+0

不會在pageToLoad變種最終會被loadExternal.html? – Cole 2010-12-23 03:47:21

5
$("#loadExternal").change(function() { 
    page = $(this).val(); 
    $("#container").load(page + ".html") 
});