Question

这是一个大学项目。我正在尝试创建两个选择框，分别是制造商和模型。然后，所选的选项将影响将执行的查询，然后填充选择框。它不起作用。

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>');
        }
    });
});

Answer 1

尝试＆＃34;方法：＆＃39; POST＆＃39;＆＃34;而不是＆＃34;键入：＆＃39; POST＆＃39;＆＃34;

＆＃13;

<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>');
        }
    });
});

＆＃13;

使用jQuery，Ajax和PHP的动态依赖选择框

1 个答案: