2つの関連するコンボボックスの項目を動的に変更する方法

Question

私は2つのmySQLテーブルを持っていますtbl1とtbl2tbl1はtbl2カラムを参照する主キーカラムを持っています。今、私は2つのコンボボックスが利用可能なhtml形式を持っています。私はtbl1のすべてのデータを最初のコンボボックスに示します。今度は、最初のコンボボックスで項目を選択した後に、tbl2の関連データを2番目のコンボボックスに表示します。

私はそれを達成するための簡単で簡単な方法を教えてください。前もって感謝します。

Answer 1

要するに：file1.phpで

1. 、mysqlのtbl1を取得し、コンボボックスに表示します。
2. コンボボックスの変更時に、オプションの値を取得し、PHPファイルfile2.phpをajax経由で渡し、file2.phpによって生成されるfile1.phpの出力を表示します。
3. file2.phpには、IdleをAjaxで渡してmysql 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 | DOWNLOAD