Question

我有一堆包含文本数据的静态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>

Answer 1

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

Answer 2

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

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

查看working demo

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

2 个答案: