簡體   English   中英

使用jQuery,Ajax和PHP的動態相關選擇框

[英]Dynamic Dependent Select Box using jQuery, Ajax and PHP

這是針對大學項目的。 我正在嘗試創建兩個選擇框,即制造商和型號。 然后,所選的選擇將影響將要執行的查詢,然后填充選擇框。 沒用

HTML

<select name="manufacturername" id="manufacturername" class="form-control">
                            <option selected>Choose...</option>
                            <?php $ret="SELECT * FROM tblmodel INNER JOIN tblmanufacturer ON tblmodel.ManufacturerCode = tblmanufacturer.ManufacturerCode";
                            $query= $dbh -> prepare($ret);
                            //$query->bindParam(':id',$id, PDO::PARAM_STR);
                            $query-> execute();
                            $results = $query -> fetchAll(PDO::FETCH_OBJ);
                            if($query -> rowCount() > 0)
                            {
                                foreach($results as $result)
                                {
                                    ?>
                                    <option value="<?php echo htmlentities($result->ManufacturerCode);?>"><?php echo htmlentities($result->ManufacturerName);?></option>
                                <?php }} ?>
                        </select>
<select name="modelname" id="modelname" class="form-control">
                            <option selected>Choose...</option>
                        </select>

AJAX

if(isset($_POST["ManufacturerCode"]) && !empty($_POST["ManufacturerCode"])){
$query = $db->query("SELECT * FROM tblmodel INNER JOIN tblmanufacturer ON tblmodel.ManufacturerCode = tblmanufacturer.ManufacturerCode WHERE tblmanufacturer.ManufacturerCode = ".$_POST['ManufacturerCode']);
$rowCount = $query->num_rows;
if($rowCount > 0){
    echo '<option value="">Select Model</option>';
    while($row = $query->fetch_assoc()){
        echo '<option value="'.$row['ModelCode'].'">'.$row['ModelName'].'</option>';
    }
}else{
    echo '<option value="">Model not available</option>';
}

}

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
    $('#manufacturername').on('change',function(){
        var ManufacturerCode = $(this).val();
        if(ManufacturerCode){
            $.ajax({
                type:'POST',
                url:'AJAXdata.php',
                data:'ManufacturerCode='+ManufacturerCode,
                success:function(html){
                    $('#modelname').html(html);
                }
            });
        }else{
            $('#modelname').html('<option value="">Select model first</option>');
        }
    });
});

嘗試使用“方法:'POST'”而不是“類型:'POST'”

 <script type="text/javascript"> $(document).ready(function(){ $('#manufacturername').on('change',function(){ var ManufacturerCode = $(this).val(); if(ManufacturerCode){ $.ajax({ method:'POST', url:'AJAXdata.php', data:'ManufacturerCode='+ManufacturerCode, success:function(html){ $('#modelname').html(html); } }); }else{ $('#modelname').html('<option value="">Select child first</option>'); } }); }); 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM