как динамически изменять элемент двух связанных полей

У меня две таблицы tbl1 и tbl2 tbl1 имеет столбец первичного ключа, который ссылается в столбце tbl2 . Теперь у меня есть html-форма, в которой доступны два combobox. I показывает все данные tbl1 в первое tbl1 списком. Теперь я хочу показать связанные данные tbl2 во втором tbl2 списком после выбора элемента в первом поле со списком.

Поэтому, пожалуйста, объясните мне простую и легкую технику для ее достижения. Заранее спасибо.

Вкратце:

  1. В file1.php mysql tbl1 и отобразите его в поле со списком.
  2. При изменении поля Combo, выберите значение параметра и передайте ему файл php file2.php через ajax и отобразите вывод в file1.php который создается file2.php .
  3. В file2.php , file2.php mysql tbl2 с идентификатором, переданным Ajax, и tbl2 со списком.

Пример:

index.php

 <script type="text/javascript"> function GetXmlHttpObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } function ajax_function(url, postData, id) { xmlhttp=GetXmlHttpObject(); xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", postData.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementById(id).innerHTML=xmlhttp.responseText; } } xmlhttp.send(postData); } function dispSecond(Id) { var params = 'Id=' + Id ; var DivId = 'dispDiv'; ajax_function('ajax_display.php', params, DivId); } </script> <?php /* Mysqli query to retrieve and store in $ArrayList(Id=>Text) Example: $ArrayList = array(1=>'Ford',2=>'Chevy'); */ ?> <select id="drop_first" name="drop_first" onchange="return dispSecond(this.value);"> <option value="0">[Select]</option> <?php foreach ($ArrayList as $k=>$v) { echo '<option value="'.$k.'">'.$v.'</option>'; } ?> </select> <div id="dispDiv"></div> 

ajax_display.php

 <?php $Id = isset($_REQUEST['Id']) ? $_REQUEST['Id'] : ''; if ($Id) { /* Mysqli query to retrieve and store in $SubArray where $Id Example: If $Id=1 $SubArray = array(1=>'Focus',2=>'Explorer'); If $Id=2 $SubArray = array(1=>'Cavalier',2=>'Impala', 3=>'Malibu'); */ ?> <select id="drop_second" name="drop_second"> <option value="0">[Select]</option> <?php foreach ($SubArray as $k=>$v) { echo '<option value="'.$k.'">'.$v.'</option>'; } ?> </select> <?php } ?> 

Заметка:

Используйте Mysqli или PDO вместо mysql

Ниже демо и загрузка основаны на массивах, которые можно реализовать с помощью поиска mysqli.

Также вы можете попробовать использовать $ .ajax, что также проще.

DEMO | СКАЧАТЬ