如何使用 jQuery 将静态 HTML 文件的内容加载到 DIV 中？答案

【问题标题】：How to load the contents of a static HTML file into a DIV using jQuery?如何使用 jQuery 将静态 HTML 文件的内容加载到 DIV 中？
【发布时间】：2010-12-23 03:39:27
【问题描述】：

我有一堆包含文本数据的静态 HTML 文件：

/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>

【问题讨论】：

标签： jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以将更改事件绑定到选择框。获取当前选择的值。使用.load() 事件加载页面。

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

查看working demo

【讨论】：

不会 pageToLoad var 最终成为 loadExternal.html 吗？
@Cole，不，它将是所选选项的值。
啊，当我评论时它说 this.id。现在应该没事了。