如何動態更改兩個相關組合框的項目

Question

我有兩個mySQL表格tbl1和tbl2tbl1有一個主鍵列在tbl2列中引用。現在我有兩個組合框可用的HTML表單。我將tbl1的所有數據顯示爲第一個組合框。現在我想在選擇第一個組合框中的項目後，將tbl2的相關數據顯示到第二個組合框中。

所以請解釋一下簡單易用的技術來實現它。提前致謝。

Answer 1

在短：

1. 在file1.php，MySQL的檢索和tbl1在組合框中顯示。
2. 關於更改組合框，請取出選項的值，並通過ajax將其傳遞給php文件file2.php，並顯示的輸出，該輸出由file2.php生成。
3. 在file2.php中，檢索mysql tbl2，並通過Ajax傳遞Id並生成一個組合框。

實施例：

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