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

Question

I Have a side bar on my web page and I've placed two drop down menu's in it that each pull queries from other pages in my domain and display the results in an iframe. 我的网页上有一个侧边栏，并且在其中放置了两个下拉菜单，每个菜单都从域中的其他页面提取查询，并在iframe中显示结果。 Either works fine on it's own, but when I load them both on the same page they only pull in data from the first menu. 两者都可以正常工作，但是当我将它们都加载到同一页面时，它们仅从第一个菜单中提取数据。 Any ideas why? 有什么想法吗？ I've looked at the code and can't see my error. 我看过代码，看不到我的错误。

<!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

I am not very strong in javascript but it looks like your script is identical for both, meaning that the document.getElementById is looking for the same file ("My Select"). 我的Java语言不是很强，但是看起来您的脚本对于两个脚本是相同的，这意味着document.getElementById正在寻找相同的文件（“我的选择”）。 In my limited experience with javascript, my code has a reference to !=-1 which represents a change. 以我在javascript方面的有限经验，我的代码引用了！=-1（表示更改）。 There has to be a difference between the two "My Select". 两个“我的选择”之间必须有所区别。

I used javascript to expand and collapse extra data and each section of data had to have a unique id (identifier). 我使用JavaScript来扩展和折叠额外的数据，并且数据的每个部分都必须具有唯一的ID（标识符）。 If they had the same id, the function only worked on the first and not the second. 如果它们具有相同的ID，则该功能仅适用于第一个而不适用于第二个。 Once the second had a separate id, then the function worked. 一旦第二个具有单独的ID，则该函数起作用。

So in the Our Staff, the select id is mySelect. 因此，在我们的工作人员中，选择ID为mySelect。 It is also mySelect for the Our Projects. 它也是“我们的项目”的mySelect。 I believe the first one can say as mySelect but the second one has to change to mySelect1. 我相信第一个可以说为mySelect，但第二个必须更改为mySelect1。

I know that this is not a complete copy and paste answer but I hope it helps get you on the right path. 我知道这不是一个完整的复制和粘贴答案，但希望它能帮助您走上正确的道路。

侧栏中的下拉菜单调用相同的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