多个下拉菜单可在iframe中返回数据

Question

I have two drop down menus that use the same iframe to display data from the queries being run. 我有两个下拉菜单，它们使用相同的iframe来显示正在运行的查询中的数据。 The problem is that the second menu is only returning the data from the first menu. 问题在于第二个菜单仅从第一个菜单返回数据。 I've tried changing the select id variables but it hsn't made a difference. 我试过更改选择id变量，但没有改变。 How can I set this up so that both menus pull the data they're supposed to? 我该如何进行设置，以使两个菜单都可以提取它们应该输入的数据？

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

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

Answer 1

Change the second select_change() to select_change2() , and change the second mySelect id to mySelect2 . 将第二个select_change（）更改为select_change2（） ，并将第二个mySelect id更改为mySelect2 。 Also, you're missing a closing curly brace to end your if in the second select_change(). 另外，在第二个select_change（）中，如果缺少结尾的花括号则无法结束。

When you add javascript in a script tag, that code is global. 在脚本标记中添加javascript时，该代码是全局代码。 So you made two methods named select_change(). 因此，您创建了两个名为select_change（）的方法。 Only one can exist, so it looks like the browser chose to use the first one. 只能存在一个，因此浏览器似乎选择使用第一个。 The same goes with id. id也一样。 You shouldn't have two elements with the same id on one page. 您不应在一页上包含两个具有相同ID的元素。

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

edit: I updated it to use separate iframes. 编辑：我更新了它以使用单独的iframe。

多个下拉菜单可在iframe中返回数据

问题描述

1 个解决方案

解决方案1
0 2015-11-15 06:00:24

多个下拉菜单可在iframe中返回数据

问题描述

1 个解决方案

解决方案1 0 2015-11-15 06:00:24

解决方案1
0 2015-11-15 06:00:24