获取两个下拉菜单以在同一iframe中显示数据

Getting two drop down menus to display data in the same iframe

本文关键字：iframe 数据 显示 下拉菜单 两个 获取      更新时间：2023-09-26

我有两个下拉菜单，每个菜单都从iframe中显示的查询中提取数据。问题是，单击这两个菜单会导致创建两个iframe，并且数据同时显示在两个菜单中。我如何设置它，以便只创建一个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");
        x.setAttribute("id", "IF");
        iframeExists = true;
      } else {
        x = document.getElementById("IF");
      }
      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="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;
      } else {
        x = document.getElementById("IF2");
      }
      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>

将逻辑组合为一个方法

function select_change(select) {
  var ifr = document.getElementById("ifr");
  if (!ifr) {
    ifr = document.createElement("iframe");
    ifr.id = "ifr";
    document.body.appendChild(ifr);
  }
  var val = select.options[select.selectedIndex].value;
  ifr.setAttribute("src", "http://www.oldgamer60.com/Project/" + val + ".php");
}
<form>
  <p><b>Our Projects</b>
    <select id="mySelect2" onchange="select_change(this)">
      <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>
<form>
  <p><b>Our Projects</b>
    <select id="mySelect2" onchange="select_change(this)">
      <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>

相关文章：