Drop down menu in a side bar calling the same javascript

Question

I Have a side bar on my web page and I've placed two drop down menu's in it that each pull queries from other pages in my domain and display the results in an iframe. Either works fine on it's own, but when I load them both on the same page they only pull in data from the first menu. Any ideas why? I've looked at the code and can't see my error.

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

I am not very strong in javascript but it looks like your script is identical for both, meaning that the document.getElementById is looking for the same file ("My Select"). In my limited experience with javascript, my code has a reference to !=-1 which represents a change. There has to be a difference between the two "My Select".

I used javascript to expand and collapse extra data and each section of data had to have a unique id (identifier). If they had the same id, the function only worked on the first and not the second. Once the second had a separate id, then the function worked.

So in the Our Staff, the select id is mySelect. It is also mySelect for the Our Projects. I believe the first one can say as mySelect but the second one has to change to mySelect1.

I know that this is not a complete copy and paste answer but I hope it helps get you on the right path.

Drop down menu in a side bar calling the same javascript

Question

1 answers

solution1
0 2015-11-14 20:47:59

Drop down menu in a side bar calling the same javascript

Question

1 answers

solution1 0 2015-11-14 20:47:59

solution1
0 2015-11-14 20:47:59