Несколько выпадающих меню, возвращающих данные в iframe

У меня есть два раскрывающихся меню, которые используют один и тот же iframe для отображения данных из запущенных запросов. Проблема в том, что второе меню возвращает данные только из первого меню. Я попытался изменить переменные выбора id, но это не изменило ситуацию. Как я могу настроить это так, чтобы оба меню вытащили данные, которые они должны были использовать?Несколько выпадающих меню, возвращающих данные в 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> 

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

источник

2015-11-15 Tony

Предполагая, что это тот же домен, что и страница, почему бы не Ajax данные? Также почему php-файл для каждого проекта вместо '' getData.php? Project = "+ my_select_value' – mplungjan

Это для школьного задания, и требовалось использовать php. Скрипт для запросов запускается на отдельных страницах моего домена. Я вызываю каждый отдельно и отображаю их в iframe. – Tony

Я не сказал «не использую php». Я сказал, что использую один файл php и проверяю '$ _GET [" project "]', для которого вы передаете проект – mplungjan

Изменение второй select_change() к select_change2() и изменить второй mySelect идентификатор mySelect2. Кроме того, вам не хватает закрывающей фигурной скобки, чтобы завершить ее, если во второй select_change().

Когда вы добавляете javascript в тег скрипта, этот код является глобальным. Таким образом, вы создали два метода с именем select_change(). Только один может существовать, поэтому похоже, что браузер решил использовать первый. То же самое происходит с 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"); 
 
     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>

редактировать: Я обновил его использовать отдельные фреймы.

источник

2015-11-15 06:00:24 nardnob

Я пробовал несколько изменений этого, но когда я изменяю идентификатор mySelect во втором скрипте, он также останавливает работу первого. – Tony

Вам нужно также изменить имена методов, так как они глобальны. Их нельзя назвать одним и тем же. Код, который я опубликовал, должен работать. Но они используют один и тот же iframe. – nardnob

Я пробовал несколько вариантов, но я, очевидно, что-то пропустил. Можете ли вы привести мне пример? – Tony

Несколько выпадающих меню, возвращающих данные в iframe

ответ

Смежные вопросы