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

Question

我需要有一個選擇框顯示選項，這些選項是基於從上方的下拉框中選擇的。一旦用戶選擇了汽車品牌，那麼我希望汽車的汽車模型成爲選擇的選項。

我已經能夠讓汽車從我的mysql數據庫中顯示選項，但現在我只需要那些車型。我的數據庫有兩個柱子，一個用於製作，一個用於模型。

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> 

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> 

從這裏，您可以創建選擇並使用makes數組的元素填充第一個選項。然後添加一個onChange事件到第一個選擇來填充第二個選擇。

EDIT對於選擇創建：

<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來關聯模型，然後你可能不得不使用一個對象而不是一個數組。

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']); ?>; 
    ... 
?>