側欄中的下拉菜單調用相同的javascript

Question

我的網頁上有一個側邊欄，並且在其中放置了兩個下拉菜單，每個菜單都從域中的其他頁面提取查詢，並在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");
    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

我的Java語言不是很強，但是看起來您的腳本對於兩個腳本是相同的，這意味着document.getElementById正在尋找相同的文件（“我的選擇”）。 以我在javascript方面的有限經驗，我的代碼引用了！=-1（表示更改）。 兩個“我的選擇”之間必須有所區別。

我使用JavaScript來擴展和折疊額外的數據，並且數據的每個部分都必須具有唯一的ID（標識符）。 如果它們具有相同的ID，則該功能僅適用於第一個而不適用於第二個。 一旦第二個具有單獨的ID，則該函數起作用。

因此，在我們的工作人員中，選擇ID為mySelect。 它也是“我們的項目”的mySelect。 我相信第一個可以說為mySelect，但第二個必須更改為mySelect1。

我知道這不是一個完整的復制和粘貼答案，但希望它能幫助您走上正確的道路。

側欄中的下拉菜單調用相同的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