0
好,我chainged腳本,這是現在的索引文件的代碼:填充3跟進採用PHP + Mysql和選擇列表jQuery的AJAX發佈
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("select[name='brand']").change(function(){
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
jQuery('body').on('change','select[name="series"]',function(){
var seriesValue = jQuery("select[name='series']").val();
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({series: seriesValue, brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
jQuery('body').on('change','select[name="models"]',function(){
var modelsValue = jQuery("select[name='models']").val();
var seriesValue = jQuery("select[name='series']").val();
var brandValue = jQuery("select[name='brand']").val();
jQuery.ajax({
type: "POST",
url: "handler.php",
data: ({models: modelsValue, series: seriesValue, brand: brandValue, status: 1}),
beforeSend: function(){ jQuery("#loader").show(); },
complete: function(){ jQuery("#loader").hide(); },
success: function(response){
jQuery("#results").html(response);
jQuery("#results").show();
}
});
});
});
</script>
Brands:
<select name="brand">
<option value="">Please Select</option>
<?php
$brands = get_brands();
foreach($brands as $brand) {
?>
<option value="<?php echo $brand['brand_id']?>"><?php echo $brand['brand_name']; ?></option>
<?php
}
?>
</select>
<div id="results" style="display:none;"></div>
<div id="loader" style="display:none;"><img src="ajax-loader.gif" alt="loading..."></div>
,這是處理。第文件:
<?php
if(!empty($_POST['brand'])) {
$curentSeries = get_series($_POST['brand']);
?>
Series:
<select name="series">
<option value="">Please Select</option>
<?php
foreach($curentSeries as $ser) {
?>
<option value="<?php echo $ser['series_id']; ?>"><?php echo $ser['series_name']; ?></option>
<?php
}
?>
</select>
<?php
}
?>
<?php
if(!empty($_POST['series'])) {
$curentModels = get_models($_POST['brand'], $_POST['series']);
?>
Model:
<select name="models">
<option value="">Please Select</option>
<?php
foreach($curentModels as $model) {
?>
<option value="<?php echo $model['model_id']; ?>"><?php echo $model['model_name']; ?></option>
<?php
}
?>
</select>
<?php
}
?>
<?php
if(!empty($_POST['models'])) {
echo "<br />brand: {$_POST['brand']}<br />series: {$_POST['series']}<br />model: {$_POST['models']}";
}
現在
腳本工作,我們想通了,最後一個問題是在處理文件,因爲我整理出來,一切都很好,現在
的東西似乎是工作,我只是得到了一個問題,爲什麼我們結合這'的jQuery(「主體」)。在(「變」,「選擇[NAME =‘系列’]」 ,function(){'''body'這是應該如何完成的?我只是不知道jquery,所以我想知道它的良好實踐和合法的解決方案,如果是的話,我一定會遵循:) – Mevia
你告訴jquery,「身體」有一個動態變化 - 就像那裏是創建了一些新的元素,所以jquery基於新創建的html元素創建事件。您甚至可以縮小到選擇框加載的部分(id =「model」)。有關更多信息,請參閱https://learn.jquery.com/events/event-delegation/。 – Coder
@ user2668182我相信這個答案值得你的投票! – Coder