Question

我已经写了第一个下拉列表，在第一个列表选择时显示另一个下拉列表。根据第二个下拉列表中的选择，我成功地在同一页面上的iframe中显示不同内容（即我自己网站的不同html文件）。一切都没事。但是，我怀疑iframe对SEO不好，所以我决定使用DIV来取代iframe。请原谅我从未接受过php，html等培训。

<iframe id="myIFrame" name="Frame1" width="945" height="460"  frameborder="0" ></iframe>

是原始成功代码。

（部分，尽管不是全部，相关的javascripts列在下面）

<script type="text/javascript">
    function SetIFrame()
    {
        myFrm = document.getElementById('myIFrame');
        myFrm.src = document.mapform.jump.options[document.mapform.jump.selectedIndex].value;
    }
 </script>

（部分，但不是全部，相关的html代码列在下面）

<form name="mapform" method="post">                     
<select name="jump" id="jump" size="1" style="width: 250px !important; min-width: 250px; max-width: 250px;background-color:#00FF99;" onchange="SetIFrame()"  >
<option value="/1.html">1</option>
<option value="/2.html">2</option>
<option value="" selected="selected">hello</option>
</select></form>

我尝试使用

<div id="myIFrame"></div>

或类似的替换

<iframe id="myIFrame" name="Frame1" width="945" height="460"  frameborder="0" ></iframe>.

（我真的没有受过训练）但这不起作用。我该怎么办？提前谢谢。

Answer 1

以下是演示：http://jsbin.com/cilufeta/1/edit

如果您使用的是JQuery，则可以使用JQuery's load command（如下所示）将页面内容加载到div中，类似于将页面内容加载到iframe中。

确保在您的网页上设置了JQuery：

<body>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<script>

function SetIFrame()
{
   $('#myIFrame').load(document.mapform.jump.options[document.mapform.jump.selectedIndex].value);
}

$(document).ready(function() {
$("#jump").select(function() {
  SetIFrame();
   });
});

</script>

<form name="mapform" method="post">                     
<select name="jump" id="jump" size="1" style="width: 250px !important; min-width: 250px; max-width: 250px;background-color:#00FF99;" onchange="SetIFrame()"  >
<option value="http:/yoururl/1.html">1</option>
<option value="http:/yoururl/2.html">2</option>
<option value="" selected="selected">hello</option>
</select></form>

<div id="myIFrame" style="width:945px; height:460px"></div>

</body>

注意如果您要从其他网站加载页面，则可能存在安全限制。来自其他网站的Html可能因访问限制而无法加载。

用Div替换iframe（（多个）下拉列表相关）

1 个答案: