Question

我有两个下拉菜单，它们使用相同的iframe来显示正在运行的查询的数据。问题是第二个菜单只返回第一个菜单中的数据。我已经尝试更改选择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");
    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

将第二个 select_change（）更改为 select_change2（），并将第二个 mySelect ID更改为 mySelect2 。另外，你在第二个select_change（）中错过了一个结束大括号来结束你的if。

在脚本标记中添加javascript时，该代码是全局的。所以你创建了两个名为select_change（）的方法。只有一个可以存在，所以看起来浏览器选择使用第一个。 id也是如此。你不应该在一个页面上有两个具有相同id的元素。

＆＃13;

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

＆＃13;

编辑：我将其更新为使用单独的iframe。

多个下拉菜单在iframe

1 个答案: