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

Question

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

Answer 1

我的Java语言不是很强，但是看起来您的脚本对于两个脚本是相同的，这意味着document.getElementById正在寻找相同的文件（“我的选择”）。 以我在javascript方面的有限经验，我的代码引用了！=-1（表示更改）。 两个“我的选择”之间必须有所区别。

我使用JavaScript来扩展和折叠额外的数据，并且数据的每个部分都必须具有唯一的ID（标识符）。 如果它们具有相同的ID，则该功能仅适用于第一个而不适用于第二个。 一旦第二个具有单独的ID，则该函数起作用。

因此，在我们的工作人员中，选择ID为mySelect。 它也是“我们的项目”的mySelect。 我相信第一个可以说为mySelect，但第二个必须更改为mySelect1。

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

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

问题描述

1 个解决方案

解决方案1
0 2015-11-14 20:47:59

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

问题描述

1 个解决方案

解决方案1 0 2015-11-14 20:47:59

解决方案1
0 2015-11-14 20:47:59