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

时间:2015-10-13 04:28:04

标签: javascript php jquery html drop-down-menu

很抱歉,如果以前讨论过,但所有这些都不适合我。我有5个下拉菜单,他们是品牌,型号,颜色,发动机编号和底盘编号。我的问题是我该怎么做才能使模型的下拉菜单基于选定的品牌下拉列表,例如如果用户选择本田基于我在我的数据库中发布的图像,本田的BrandID是1所以所有具有BrandID = 1的模型。所示模型的下拉列表只有brandID = 1。然后颜色的下拉是基于模型的下拉,所以像我之前讨论的那样逻辑。最后,发动机编号下拉和编号是基于颜色的下拉,也与我讨论的逻辑相同。

以下是我的品牌下拉代码

<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>

下载模型下拉列表的代码

<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>

下载颜色下拉列表

<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>

下载引擎编号

的代码

<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>

下载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>

继承我的品牌数据库的图像

enter image description here

继承我的模型数据库的图像

enter image description here

图片中有颜色,chasis no。和引擎号。数据库

enter image description here

1 个答案:

答案 0 :(得分:3)

    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/