我有两个页面和主页。总共3页。我想在更改下拉列表后访问第一页和第二页。我在名为main.html的HTML中通过Jquery尝试了这段代码。
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script>
$(document).on('change','.fx',function(){
document.getElementById('content').src = "firstpage.html";
document.getElementById('content').style.display = "block";
});
</script>
<style>
iframe{
height:700px;
width:700px;
display:none;
}
</style>
</head>
<body>
<select name="fx" class="fx">
<option value="empty"></option>
<option value="firstPage">1</option>
<option value="secondPage">2</option>
</select>
<iframe src="firstpage.html" id="content" >
</iframe>
</body>
</html>
我想使用if语句。
如果选择1 load firstPage.html
如果选择2 load secondtPage.html
此代码的任何版本。
请注意，值和文件名区分大小写，因此'firstpage'和'firstpage'不相同！
试试这个jQuery代码：
$(document).on ("change", "select.fx[name='fx']", function () {
var $select = $(this);
if ($select.val () == "firstPage") {
$("#content").attr ("src", "firstpage.html");
$("#content").show ();
}
else if ($select.val () == "secondPage") {
$("#content").attr ("src", "secondpage.html");
$("#content").show ();
}
else {
$("#content").hide ();
alert ("Page not found!");
}
});
不要这样做，因为这可能不安全：
$("#content").attr ("src", $(this).val() + ".html");
无论何时调用更改处理程序，都会向它传递一个事件，其中包含有关事件本身的相关信息。它包括一个event.target.value属性，您可以使用该属性来获取所单击的选项。您可以将".html"添加到该值中，并相应地设置iframe的src。
<script>
$(document).on("change", ".fx", function (event) {
document.getElementById("content").src = event.target.value + ".html";
document.getElementById("content").style.display = "block";
});
</script>