使用mysql數據庫根據第一個下拉框自動填充第二個下拉框

Question

我需要一個選擇框顯示選項，這些選項基於它上方的下拉框的選擇。 一旦用戶選擇了汽車制造商，那么我希望選擇汽車制造商的汽車模型。

我已經能夠從mysql數據庫中獲得要顯示的汽車制造商選項，但是現在我只需要該制造商的汽車模型。 我的數據庫有兩個列，一個用於Make，一個用於Model。

PHP的頂部是我獲得商標的方式，底部是我嘗試獲得模型的方法，但是它顯示了數百個模型，而不僅僅是我想要的幾個。 我聽說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>

Answer 1

$sql = "SELECT Model FROM myTable";

顯然，這可以為您提供所需的結果。 它將選擇所有型號。

你的sql應該看起來像

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

在哪里限制您僅檢索與您選擇的特定品牌相關的模型。

要使用AJAX做到這一點，您正在使用jQuery嗎？ 帶有Ajax調用的直接JavaScript？ 請提供更多信息以回答問題的這一部分。

Answer 2

這可能不是執行此操作的最佳方法，但是當我之前不得不做類似的事情時，我通常使用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>

在這里，您可以創建選擇並使用make數組的元素填充第一個選項。 然后將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的函數，該函數將根據make-select的選定值更新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']); ?>;
    ...
?>