如何动态更改两个相关组合框的项目 [英] how to dynamically change item of two related combobox

问题描述

我有两个mySQL表 tbl1 和 tbl2 tbl1 有一个主键列，在 tbl2 列中引用。现在我有html表单，其中有两个组合框可用。我将 tbl1 的所有数据显示在第一个组合框中。现在我想在第一个组合框中选择项目后，将 tbl2 的相关数据显示到第二个组合框中。

I have two mySQL tables tbl1 and tbl2 tbl1 has a primary key column who reference in tbl2 column. Now I have html form in which two combobox is available . I shows all data of tbl1 into first combobox. Now I want to show the related data of tbl2 into second combobox after selection of item in first combobox.

所以请解释我简单易行的技巧来实现它。在此先感谢。

So please explain me simple and easy technique to achieve it. Thanks in advance.

推荐答案

简而言之：

1. 在 file1.php 中，检索mysql tbl1 并将其显示在组合框。


2. 在更改组合框时，获取选项的值并通过ajax传递一个php文件 file2.php 显示 file1.php 中的输出，该输出由 file2.php 生成。


3. 在 file2.php 中，使用Ajax传递的Id检索mysql tbl2 并生成一个组合框。

1. In file1.php, Retrieve mysql tbl1 and display it in a combo box.
2. On change of Combo box, Fetch the value of option and pass it a php file file2.php via ajax and Display the output in file1.php which is produced by file2.php.
3. In file2.php, Retrieve mysql tbl2 with the Id passed by Ajax and generate a combo box.

示例：

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

Use Mysqli or PDO instead mysql

下面的演示和下载基于数组，您可以使用mysqli检索来实现。

Below Demo and Download are based on arrays, you can implement by using mysqli retrieval.

此外，您可以尝试使用$ .ajax，这也更容易。

Also You can try using $.ajax which is more easy also.

DEMO | 下载

这篇关于如何动态更改两个相关组合框的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！