[英]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.