使用mysql数据库根据第一个下拉框自动填充第二个下拉框

时间:2013-08-21 20:39:43

标签: php javascript mysql

我需要一个选择框显示选项,这些选项基于选项,位于其上方的下拉框中。一旦用户选择了汽车制造,那么我希望汽车制造的汽车模型成为可供选择的选项。

我已经能够从我的mysql数据库中获取汽车选项显示,但现在我需要的汽车模型只有那个make。我的数据库有两个列,一个用于Make,一个用于Model。

PHP的顶部是我获取make的方式,底部是我尝试获取模型,但它显示了数百个模型,而不是我想要的几个模型。我听说AJAX或javascript可以自动上传结果,这样会很好。任何帮助都很棒。谢谢!

</div>

<?php
    mysql_connect('localhost', '*****', '******');
    mysql_select_db('*************');
    $sql = "SELECT Make FROM CarMakes";
    $result = mysql_query($sql);
    echo "<select name='carmake3'>";
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='" . $row['Make'] . "'>" . $row['Make'] . "</option>";
    }
    echo "</select>";
?>
<?php
    mysql_connect('localhost', '******', '**********');
    mysql_select_db('*************');
    $sql = "SELECT Model FROM myTable";
    $result = mysql_query($sql);
    echo "<select class='modelbox' name='carmodel3'>";
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='" . $row['Model'] . "'>" . $row['Model'] . "</option>";
    }
    echo "</select>";
?>
<input type="text" maxlength="4" name="car3year" placeholder="year" class="WriteInBox"/>

<input type="text" maxlength="6" name="car3miles" placeholder="miles" class="WriteInBox"/>

</div>

2 个答案:

答案 0 :(得分:0)

$sql = "SELECT Model FROM myTable";

这显然可以为您提供所要求的结果。它将选择所有型号。

你的sql应该是

$sql = "SELECT Model FROM myTable WHERE Make='Make'";

在哪里限制您只检索与您选择的特定Make相关联的模型。

要使用AJAX,你使用的是jQuery吗?带Ajax调用的直接JavaScript?请提供更多信息,以便回答您的​​部分问题。

答案 1 :(得分:0)

这可能不是最好的方法,但是当我以前不得不做这样的事情时,我通常使用php在我的标题中填充一些javascript变量然后使用javascript来创建选择。此外,我假设您的数据库中有某些东西将某些模型映射到某些品牌的车辆。

<script>
var makes = new Array();
var models = new Array();
<?php
$sql = "SELECT Make FROM CarMakes";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
    makes[] = <?php echo json_encode($row['Make']); ?>;
<?php
}
$sql = "SELECT Make FROM CarMakes";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
    models[] = <?php echo json_encode($row['Model']); ?>;
<?php
}
?>
</script>

从这里,您可以创建选择并使用makes数组的元素填充第一个选项。然后将onChange事件添加到第一个选择以填充第二个选择。

编辑选择创作:

<select id="make-select" onChange="updateModels()">
</select>
<select id="model-select">
</select>
<script>
$(function() {
    $.each(makes, function (index, value) {
        $(#make-select).append($('<option>') {
            value: value,
            text: value
        });
    });
}
</script>

然后,只需创建一个名为updateModels的函数,该函数将根据所选的model-select值更新make-select。同样,您需要将模型与数据库中的品牌相关联,然后您可能必须将makes变量设为对象而不仅仅是数组。

var models = new Object()
<?php
    $sql = "SELECT Model-Make, Model FROM CarMakes";
    ...
    models.make = <?php echo json_encode($row['Model-Make']); ?>;
    models.model = <?php echo json_encode($row['Model']); ?>;
    ...
?>