基于另一个下拉列表的下拉列表，选择选项来自数据库

Question

Sorry if it was discussed before, but all of them doesn't really work for me. I have 5 dropdowns they are Brand, Model, Color, Engine No. and Chassis No., My question is what should I do to make the dropdown of the model is based on the selected dropdown of Brand, for example If a user selects Honda well based on my posted image in my database, the BrandID of Honda is 1 so all of the model that has the BrandID = 1. The dropdown of the model shown are only that has a brandID =1. Then the dropdown of color is based on the dropdown of the model, so the same logic like I discussed earlier. Finally the Dropdown of Engine No. and Chasis No. is based on the dropdown of the color, also the same as the logic that I discussed.

Here's my code for the brand dropdown

 <label for="bName" class="control-label col-xs-4"><p class="left">Brand</p></label> <div class="col-xs-7"> <div class="req"> <?php include_once "config.php"; $bsql="SELECT bName, brandID FROM brand order by bName"; $bstmt=$con->prepare($bsql); $bstmt->execute(); $bstmt->bind_result($bName, $bid); $bstmt->store_result(); echo "<select name='brandID' class='form-control'> <option value=''></option>"; while ($bstmt->fetch()){ echo '<option value="'.$bid.'">'.$bName.'</option>'; } echo '</select>'; ?> </div> </div> 

Heres the code for the dropdown of the model

 <label for="model" class="control-label col-xs-4"> <p class="left">Model</p></label> <div class="col-xs-7"> <div class="req"> <?php include_once "config.php"; $msql="SELECT model, modID FROM model order by model"; $mstmt=$con->prepare($msql); //$mstmt->bind_param('i', $bid); $mstmt->execute(); $mstmt->bind_result($model, $mid); $mstmt->store_result(); echo "<select name='mID' class='form-control'> <option value=''></option>"; while ($mstmt->fetch()){ echo '<option value="'.$mid.'">'.$model.'</option>'; } echo '</select>'; ?> </div> </div> 

Heres the code for color dropdown

 <label for="model" class="control-label col-xs-4"><p class="left">Color</p></label> <div class="col-xs-7"> <div class="req"> <?php include_once "config.php"; $csql="SELECT distinct(color) FROM stock order by color"; $cstmt=$con->prepare($csql); $cstmt->execute(); $cstmt->bind_result($color); $cstmt->store_result(); echo "<select name='color' class='form-control'> <option value=''></option>"; while ($cstmt->fetch()){ echo '<option value="'.$color.'">'.$color.'</option>'; } echo '</select>'; ?> </div> </div> 

Heres the code for the dropdown Engine No.

 <label for="engNum" class="control-label col-xs-4"> <p class="left">Engine No</p></label> <div class="col-xs-7"> <div class="req"> <?php include_once "config.php"; $esql="SELECT engNum FROM stock where status='Available' order by engNum"; $estmt=$con->prepare($esql); $estmt->execute(); $estmt->bind_result($engNum); $estmt->store_result(); echo "<select name='engNum' class='form-control'> <option value=''></option>"; while ($estmt->fetch()){ echo '<option value="'.$engNum.'">'.$engNum.'</option>'; } echo '</select>'; ?> </div> </div> 

Heres the code for the dropdown Chasis No.

 <label for="chassisNum" class="control-label col-xs-4"><p class="left">Chassis No</p></label> <div class="col-xs-7"> <div class="req"> <?php include_once "config.php"; $nsql="SELECT chassisNum FROM stock where status='Available' order by chassisNum"; $nstmt=$con->prepare($nsql); $nstmt->execute(); $nstmt->bind_result($chassisNum); $nstmt->store_result(); echo "<select name='chassisNum' class='form-control'> <option value=''></option>"; while ($nstmt->fetch()){ echo '<option value="'.$chassisNum.'">'.$chassisNum.'</option>'; } echo '</select>'; ?> </div> </div> 

Heres the Image for my brand database

Heres the Image for my model database

Heres the Image for the color, chasis no. and engine no. database

Answer 1

    Write an onchange event on select tag

    for e.g. to change the Models based on brand selected you should write


    <label for="bName" class="control-label col-xs-4"><p class="left">Brand</p></label>
    <div class="col-xs-7">
        <div class="req">   
        <?php
        include_once "config.php";
        $bsql="SELECT bName, brandID FROM brand order by bName"; 
        $bstmt=$con->prepare($bsql);
        $bstmt->execute();
        $bstmt->bind_result($bName, $bid);
        $bstmt->store_result();

        echo "<select name='brandID' class='form-control' **onchange='getModels(this)'**>
            <option value=''></option>";

            while ($bstmt->fetch()){
                echo '<option value="'.$bid.'">'.$bName.'</option>';
                                }

        echo '</select>';

    //The function getModels(this) will get called whenever user will change the value of the brand option.

    Now define this method in your js file 


    function getModels(BrandObj)
    {
        brandValue=BrandObj.value; // Will give you the ID of brand which is selected.
        // Make A ajax call to some php file which will return models based on brand ID & bind it to your Models Dropdown
    $.ajax({
      url: 'getModels.php',
      type: 'GET', // Method Type 
      data: 'brandID=brandValue',// This parameter will be sent to getModels.php 
      success: function(**data**) {
        //called when successful the data we have returned in getModels.php will be accessible in "data" variable
        // Decode the response & bind it to your dropdownList

      },
      error: function(e) {
        //called when there is an error
        //console.log(e.message);
      }
    });


    }


// IN your getModels.php file write following code

$BrandID=@$_GET['brandID'];
//Connect to database
// Write a sql to find models having brand_id=$BrandID
// Fetch rows & create array of Models & return it using 
echo json_encode(*your_array_name*)

// END getModels.php

    // You can find the detailed documentation of AJAX
    http://api.jquery.com/jquery.ajax/