侧栏中的下拉菜单调用相同的javascript_Javascript_Html

侧栏中的下拉菜单调用相同的javascript

javascript html

侧栏中的下拉菜单调用相同的javascript,javascript,html,Javascript,Html,我在我的网页上有一个侧栏，我在其中放置了两个下拉菜单，每个下拉菜单从我的域中的其他页面中提取查询，并在iframe中显示结果。这两种方法都可以单独使用，但当我将它们加载到同一页面时，它们只能从第一个菜单中提取数据。你知道为什么吗？我看了代码，看不出我的错误 <!DOCTYPE HTML> <html lang = "en"> <head> <title>Side Bar</title> <link rel="styles

我在我的网页上有一个侧栏，我在其中放置了两个下拉菜单，每个下拉菜单从我的域中的其他页面中提取查询，并在iframe中显示结果。这两种方法都可以单独使用，但当我将它们加载到同一页面时，它们只能从第一个菜单中提取数据。你知道为什么吗？我看了代码，看不出我的错误

<!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");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  if(my_select_value) {
    x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                          my_select_value + ".php");
    document.body.appendChild(x);    
  }
}

</script>

</div>
<br>



<form>
<p><b>Our Projects</b>
  <select id="mySelect" onchange="select_change()">
    <option value="">Select one</option>
    <option value="CurrentProjects">Current Projects</option>
    <option value="ProjectsInFinalReview">Projects in Final Review</option>
    <option value="CompletedProjects">Completed Projects</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");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  if(my_select_value) {
    x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                          my_select_value + ".php");
    document.body.appendChild(x);    
  }
}

</script>

</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”）；
iframeExists=true；
}否则{
x=document.getElementsByTagName（“IFRAME”）[0]；
}
如果（我的选择值）{
x、 setAttribute（“src”http://www.oldgamer60.com/Project/" +
我的_选择_值+“.php”）；
文件.正文.附件（x）；
}
}


我们的项目
选择一个
当前项目
正在进行最后审查的项目
已完成的项目

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”）；
iframeExists=true；
}否则{
x=document.getElementsByTagName（“IFRAME”）[0]；
}
如果（我的选择值）{
x、 setAttribute（“src”http://www.oldgamer60.com/Project/" +
我的_选择_值+“.php”）；
文件.正文.附件（x）；
}
}

后勤


技术订单
YAI广泛参与编写各类军用航空和地面系统的技术手册、供应和修改工作指令（MWO）。YAI后勤服务包括开发和评估后勤需求、准备综合后勤产品以及为军用航空、导弹和地面作战系统提供野战服务支持。
YAI的后勤能力包括：

技术手册写作
技术手册更改页
手工图解
MWO写作
电子手册中使用的数据标签
供应
后勤分析和评估

..

我对javascript不是很在行，但看起来您的脚本对这两个脚本都是相同的，这意味着document.getElementById正在查找相同的文件（“我的选择”）。在我有限的javascript经验中，我的代码引用了=-1表示一种变化。两个“我的选择”之间必须有区别

我使用javascript扩展和折叠额外的数据，数据的每个部分都必须有一个唯一的id（标识符）。如果它们具有相同的id，则函数仅对第一个id有效，而对第二个id无效。一旦第二个有了一个单独的id，那么这个函数就工作了

因此，在我们的员工中，select id是mySelect。这也是我为我们的项目所选择的。我相信第一个可以说是mySelect，但第二个必须改为mySelect

我知道这不是一个完整的复制粘贴答案，但我希望它能帮助您走上正确的道路。

让多个元素具有相同的id（在您的情况下是

mySelect

id）@C Fuller我已将元素分别重命名为1和2，但当我进行更改时，这两个元素都不会被拖动