Javascript 如何在div中显示另一个html文件_Javascript_Html_Drop Down Menu

Javascript 如何在div中显示另一个html文件

javascript html drop-down-menu

Javascript 如何在div中显示另一个html文件,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我有下面的javascript代码和html代码。我要做的是，当我在下拉列表中选择一个选项时，子文件夹上的index.html文件将显示在div上 <script> function display() { var cake = document.getElementById("type").value; document.getElementById("cakes").innerHTML = '<object type="text/html" data="\'+cake+

我有下面的javascript代码和html代码。我要做的是，当我在下拉列表中选择一个选项时，子文件夹上的index.html文件将显示在div上

<script>
 function display() {
var cake = document.getElementById("type").value;
document.getElementById("cakes").innerHTML = '<object type="text/html" 
data="\'+cake+'\index.html" >   </object>';
}
</script>

<body>
<center><img src="LOGO.jpg" size=20%></img></center>
<p><center><font face="Brush Script MT" size="32" color="lightblue"`enter code here`>YOU'RE SO 
SWEETS</font></center></p>
<table>
<tr>
<td><img src="home.png"></td>
<td><img src="product.png"></td>
<td><img src="online.png"></td>
<td><img src="about.png"></td>
<td><img src="contact.png"></td>
</tr>
</table>
<br>
<select id="type" multiple onchange="display()">
<option value="special">Specialty Cakes</option>
<option value="adult">Birthday Cakes for Adult</option>
<option value="kids">Birthday Cakes for Kids</option>
<option value="wedding">Wedding Cakes</option>
</select>
<br>
<div id="cakes"></div>


函数显示（）{
var cake=document.getElementById（“type”）.value；
document.getElementById（“蛋糕”）.innerHTML=''；
}
你真是太棒了
糖果


特色蛋糕
成人生日蛋糕
给孩子们的生日蛋糕
结婚蛋糕

如果您想采用丑陋的方式，可以使用iframe并更改src

如果你想用漂亮的方式（这是现在大多数网站所做的），使用Ajax将内容加载到div中，特别是因为使用Ajax，内容将真正加载到div中，而使用iframe，你只需在其中打开另一个HTML，如果你最终需要签入/签出内容，这将更加困难。Ajax将是我的选择（无论如何我从不使用iframe）

如果您不懂Ajax，我建议您检查prototypejs或jQuery如何实现它。这很简单，可以让您更好地控制插入到div中的内容。

您应该使用Ajax加载div中的内容。您可以从任何好的教程中了解Ajax。起点可能是-

更新：

从你的评论来看，我的理解是-

您可以使用jquery并在代码中使用以下代码段的变体，这些代码段来自任何函数，这些函数将在select的onchange事件中触发。您需要附加jquery库

$('#your-div-id').load('your-html-page.html');

谢谢。

出于此目的，请使用

。请仅为网站使用html和javascript代码