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

Drop down menu in a side bar calling the same javascript

本文关键字：javascript 调用 下拉菜单      更新时间：2023-09-26

我的网页上有一个侧栏，我在其中放置了两个下拉菜单，每个下拉菜单都从我域中的其他页面中提取查询，并在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>

我不是很擅长javascript，但看起来你的脚本对两者都是相同的，这意味着document.getElementById正在寻找相同的文件（"My Select"）。在我使用javascript的有限经验中，我的代码引用了=-1，其表示变化。两个"我的选择"之间必须有区别。

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

因此，在Our Staff中，select id是mySelect。它也是我们项目的mySelect。我相信第一个可以说是mySelect，但第二个必须改为mySelect1。

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

相关文章：