Javascript 获取两个下拉菜单以在同一iframe中显示数据
我有两个下拉菜单，每个下拉菜单从iframe中显示的查询中提取数据。问题是，在两个菜单上单击会创建两个iFrame，并在这两个菜单中显示数据。我如何设置它，以便只创建一个iframe并由两个菜单共享Javascript 获取两个下拉菜单以在同一iframe中显示数据,javascript,html,iframe,Javascript,Html,Iframe,我有两个下拉菜单，每个下拉菜单从iframe中显示的查询中提取数据。问题是，在两个菜单上单击会创建两个iFrame，并在这两个菜单中显示数据。我如何设置它，以便只创建一个iframe并由两个菜单共享 <!DOCTYPE HTML> <html lang = "en"> <head> <title>Side Bar</title> <link rel="stylesheet" type="text/css" href="s
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Side Bar</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style>
div {
text-align: justify;
}
.section {
margin-left: auto;
margin-right: auto;
width: 70%;
}
</style>
</head>
<body>
<nav>
<br>
<h1>Fixed header</h1>
<br>
<h2>Subheader</h2>
<ul>
<br>
<form>
<p><b>Our Staff</b>
<select id="mySelect" onchange="select_change()">
<option value="">Select one</option>
<option value="Illustrators">Illustrators</option>
<option value="TechWriters">Tech Writers</option>
</select>
</p>
</form>
<div class="center">
<script>
var iframeExists = false;
function select_change() {
var my_select = document.getElementById("mySelect");
var my_select_value = my_select.options[my_select.selectedIndex].value;
var x;
if (!iframeExists) {
x = document.createElement("IFRAME");
x.setAttribute("id", "IF");
iframeExists = true;
} else {
x = document.getElementById("IF");
}
if(my_select_value) {
x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
my_select_value + ".php");
document.body.appendChild(x);
}
}
</script>
</div>
<form>
<p><b>Our Projects</b>
<select id="mySelect2" onchange="select_change2()">
<option value="">Select one</option>
<option value="CurrentProjects">Current Projects</option>
<option value="ProjectsInFinalReview">In Final Review</option>
<option value="CompletedProjects">Completed Projects</option>
</select>
</p>
</form>
<div class="center">
<script>
var iframe2Exists = false;
function select_change2() {
var my_select = document.getElementById("mySelect2");
var my_select_value = my_select.options[my_select.selectedIndex].value;
var x;
if (!iframe2Exists) {
x = document.createElement("IFRAME");
x.setAttribute("id", "IF2");
iframe2Exists = true;
} else {
x = document.getElementById("IF2");
}
if(my_select_value) {
x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
my_select_value + ".php");
document.body.appendChild(x);
}
}
</script>
</div>
<br>
</div>
</ul>
</nav>
<div id="content">
<div id="main">
<h1>Logistics</h1>
<br>
<h2>Tech Orders</h2>
<div class="section">
<p>YAI has been extensively involved in the writing of technical manuals, provisioning and Modification Work Orders (MWOs) for all type of military aviation and ground systems. YAI logistic services have included development and assessment of logistical requirements, preparation of integrated logistic products and field service support for military aviation, missile and ground combat systems.</>
<p>YAI's Logistic Capabilities include:</p>
<ul>
<li>Technical Manual Writing</li>
<li>Technical Manual Change Pages</li>
<li>Manual Illustrating</li>
<li>MWO Writing</li>
<li>Tagging of Data for Use in Electronic Manuals</li>
<li>Provisioning</li>
<li>Logistical Analyses and Assessments</li>
</ul>
</div>
</div>
<footer>
..
</footer>
</div>
</body>
</html>
侧栏
div{
文本对齐：对齐；
}
.科{
左边距：自动；
右边距：自动；
宽度：70%；
}
固定收割台
副标题
我们的员工
选择一个
插图画家
科技作家
var iframeExists=false；
函数选择_更改（）{
var my_select=document.getElementById（“mySelect”）；
var my\u select\u value=my\u select.options[my\u select.selectedIndex].value；
var x；
如果（！iframe存在）{
x=document.createElement（“IFRAME”）；
x、 setAttribute（“id”、“IF”）；
iframeExists=true；
}否则{
x=document.getElementById（“如果”）；
}
如果（我的选择值）{
x、 setAttribute（“src”http://www.oldgamer60.com/Project/" +
我的_选择_值+“.php”）；
文件.正文.附件（x）；
}
}
我们的项目
选择一个
当前项目
在最终审查中
已完成的项目
var iframe2Exists=false；
函数选择_change2（）{
var my_select=document.getElementById（“mySelect2”）；
var my\u select\u value=my\u select.options[my\u select.selectedIndex].value；
var x；
如果（！iframe2Exists）{
x=document.createElement（“IFRAME”）；
x、 setAttribute（“id”、“IF2”）；
iframe2Exists=true；
}否则{
x=document.getElementById（“IF2”）；
}
如果（我的选择值）{
x、 setAttribute（“src”http://www.oldgamer60.com/Project/" +
我的_选择_值+“.php”）；
文件.正文.附件（x）；
}
}
后勤
技术订单
YAI广泛参与编写各类军用航空和地面系统的技术手册、供应和修改工作指令（MWO）。YAI后勤服务包括开发和评估后勤需求、准备综合后勤产品以及为军用航空、导弹和地面作战系统提供野战服务支持。
YAI的后勤能力包括：
- 技术手册写作
- 技术手册更改页
- 手工图解
- MWO写作
- 电子手册中使用的数据标签
- 供应
- 后勤分析和评估
..
功能选择\u更改（选择）{
var ifr=document.getElementById（“ifr”）；
如果（！ifr）{
ifr=document.createElement（“iframe”）；
ifr.id=“ifr”；
文件.正文.附件（ifr）；
}
var val=select.options[select.selectedIndex].value；
ifr.setAttribute（“src”http://www.oldgamer60.com/Project/“+val+”.php”）；
}
我们的项目
选择一个
当前项目
在最终审查中
已完成的项目
我们的项目
选择一个
当前项目
在最终审查中
已完成的项目