Question

我有两个下拉菜单，每个菜单都会从iframe中显示的查询中提取数据。问题是，单击两个菜单会导致创建2个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>

Answer 1

将逻辑合并为一种方法

＆＃13;

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");
}

＆＃13;

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

＆＃13;

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

1 个答案: