级联下拉框

时间:2012-08-26 16:10:12

标签: php javascript mysql dynamic cascadingdropdown

我使用了各种脚本并尝试修改它们以适合我的数据库,但这就是我想要实现的目标

MySQL数据库,单表“Carlist”

我想整理一个表单,用户将从数据库中选择“Make”,这将过滤“Model”的第二个下拉框,然后第三个下拉框将过滤掉该特定的不同变体模型。

我的数据库有字段Make,Model和Version

Box 1: SELECT DISTINCT Make FROM Carlist SORT BY Make
Box 2: SELECT Distinct Model FROM Carlist WHERE Make=$Make SORT BY Model
Box 3: SELECT DISTINCT Version FROM Carlist WHERE Make=$Make AND Model=$Model SORT BY Version

我还想提出一种机制,在上一个框已经

之前,无法选择第二个和第三个框。

我遇到的所有脚本都使用数据库中的多个表,目前我的数据库有超过1500条记录。

如果有人对此有任何有用的链接或建议会很好,如上所述,我试图修改其他人的脚本但没有成功,但这些脚本是为多个表设计的

2 个答案:

答案 0 :(得分:0)

假设您正在尝试填写HTML表单,请在每次选择后使用Ajax从数据库中获取相应的下拉框值。

答案 1 :(得分:0)

得到一个解决方案,代码如下:

<?php 
/* Written for Khaoskreations 2010-06-13 */

//db connect code
require "config.php"; // Your Database details


$query = "SELECT * FROM Carlist ";
$result = mysql_query($query);

//==============================================================================build arrays from db
$Make = array();
$Model = array();
$Version = array();

if (!$result) echo "Error: ".mysql_error();
else {
    $Make_group = "";
    $Model_group = "";
    $num = mysql_num_rows($result);

    for ($i = 0;$i<$num;$i++) {
        $r = mysql_fetch_array($result);

        if ($r['Make'] != $Make_group) {
            $Make[$r['Make']] = $r['Make'];
            $Model[$r['Make']][$r['Model']] = $r['Model'];
            $Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];

            $Make_group = $r['Make'];
            $Model_group = $r['Make'];
        } else if ($r['Model'] != $Model_group) {
            $Model[$r['Make']][$r['Model']] = $r['Model'];
            $Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];

            $Model_group = $r['Make'];
        } else {
            $Version[$r['Make']][$r['Model']][$r['Version']] = $r['Version'];
        }
    }
}

//==============================================================================create scripts
$script = "\n<script type='text/javascript'>\n";
//build last name array
$script .= "var Make = new Array(";
$list = "";
foreach ($Make as $key => $val) {
    $list .= " \"".$val."\",";
    //echo $val ."<br />";
}
$list = substr($list, 0, -1);
$list .= " );\n";
$script .= $list;
$list = "";
//build Model array
$script .= "\nvar Model = new Array();";
foreach ($Model as $Maken => $fary) {
    $list .= "\nModel[\"".$Maken."\"] = new Array(";
    foreach ($fary as $key => $value) {
        $list .= " \"". $value . "\",";
    }
    $list = substr($list, 0, -1);
    $list .= " );";
}

$script .= $list;
$list = "";
//build Version array
$list = "\nvar Version = new Array();";
foreach ($Version as $Maken => $fary) {
    $list .= "\nVersion[\"".$Maken."\"] = new Array();";
    foreach ($fary as $Modeln => $aary) {
        $list .= "\nVersion[\"".$Maken."\"][\"".$Modeln."\"] = new Array(";
        foreach ($aary as $key => $value) {
            $list .= " \"" . $value . "\",";
        }
        $list = substr($list, 0, -1);
        $list .= " );";
    }
}
$script .= $list;

//script functions to update tiers

$script .= <<< EOSCRIPT


function resetForm(theForm) {
    theForm.Makes.options[0] = new Option("--- Select Make ---", "");
    for (var i=0; i<Make.length; i++) {
        theForm.Makes.options[i+1] = new Option(Make[i], Make[i]);
    }
    theForm.Makes.options[0].selected = true;

    theForm.Models.options[0] = new Option("--- Select Model ---", "");
    theForm.Models.options[0].selected = true;
    theForm.Version.options[0] = new Option("--- Select Version ---", "");
    theForm.Version.options[0].selected = true;
    document.getElementById("selectbox").innerHTML = "";
}

function reloadForm(theForm,Manufacturer,product,specific) {
    theForm.Makes.options[0] = new Option("--- Select Version ---", "");
    for (var i=0; i<Make.length; i++) {
        theForm.Makes.options[i+1] = new Option(Make[i], Make[i]);
        if (Manufacturer == Make[i]) theForm.Makes.options[i+1].selected = true;
    }
    document.getElementById("selectbox").innerHTML = "here";

    var fn = Model[Manufacturer];

    theForm.Models.options.length = 0;
    for (var i=0; i<fn.length; i++) {
        theForm.Models.options[i] = new Option(fn[i], fn[i]);
        if (product == fn[i]) {
            theForm.Models.options[i].selected = true;
        }
    }

    var Versions = Version[Manufacturer][product];

    theForm.Version.options.length = 0;
    for (var i=0; i<Versions.length; i++) {
        theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
        if (specific == Versions[i][0]) {
            theForm.Version.options[i].selected = true;
        }
    }
    document.getElementById("selectbox").innerHTML = "You selected person #"+specific;
}

function updateproducts(theForm) {
    var lname = theForm.Makes.options[theForm.Makes.options.selectedIndex].value;
    var fnames = Model[lname];

    theForm.Models.options.length = 0;
    for (var i=0; i<fnames.length; i++) {
        theForm.Models.options[i] = new Option(fnames[i], fnames[i]);
    }

    var findex = theForm.Models.options[theForm.Models.options.selectedIndex].value;
    var Versions = Version[lname][findex];

    theForm.Version.options.length = 0;
    for (var i=0; i<Versions.length; i++) {
        theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
    }
    theForm.Version.options[0].selected = true;
}

function updateVersion(theForm) {
    var lname = theForm.Makes.options[theForm.Makes.options.selectedIndex].value;
    var findex = theForm.Models.options[theForm.Models.options.selectedIndex].value;
    var Versions = Version[lname][findex];

    theForm.Version.options.length = 0;
    for (var i=0; i<Versions.length; i++) {
        theForm.Version.options[i] = new Option(Versions[i], Versions[i]);
    }
    theForm.Version.options[0].selected = true;
}

</script>

EOSCRIPT;

$reload_script = "";
if ($_POST['Makes'] != "" && $_POST['Models'] != "") {
    $reload_script .= "<script type='text/javascript'> "
            ."reloadForm(document.vehicleform,'".$_POST['Makes']."','".$_POST['Models']."',".$_POST['Version'].");"
            ."</script>";
} else {
    $reload_script .= "<script type='text/javascript'>"
            ."resetForm(document.vehicleform);"
            ."</script>";
}

//============================================================================== build page


$page = <<< EOPAGE
<html>
    <head>
        {$script}
    </head>
    <body>
        <form method="post" action="test3.php" name='vehicleform'>
            <select name='Makes' onchange="updateproducts(this.form)"></select><BR>
            <select name="Models" onchange="updateVersion(this.form)"></select><BR>
            <select name="Version"></select>
            <input type='button' value='Reset' onclick='resetForm(document.vehicleform)'/>
            <input type='submit' value='Reload'/>
        </form>
        <div id='selectbox'></div>
        {$reload_script}
    </body>
</html>

EOPAGE;

echo $page;

?>