2014-03-30 67 views
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']}"; 
} 
現在

腳本工作,我們想通了,最後一個問題是在處理文件,因爲我整理出來,一切都很好,現在

回答

1

因爲你的「系列」的數據是動態創建的,你需要使用「在'事件在j query.Check下面的代碼

<script type="text/javascript"> 
    jQuery(document).ready(function(){    

    jQuery("select[name='brand']").change(function(){    

     var optionValue = jQuery("select[name='brand']").val();  

     jQuery.ajax({ 
      type: "POST", 
      url: "data.php", 
      data: ({brand: optionValue, status: 1}), 
      beforeSend: function(){ jQuery("#loader").show(); }, 
      complete: function(){ jQuery("#loader").hide(); }, 
      success: function(response){ 
       jQuery("#series").html(response); 
       jQuery("#series").show(); 
      } 
     });   
    }); 

    jQuery('body').on('change','select[name="series"]',function(){    

     var seriesValue = jQuery("select[name='series']").val();  

     jQuery.ajax({ 
      type: "POST", 
      url: "data.php", 
      data: ({series: seriesValue, status: 1}), 
      beforeSend: function(){ jQuery("#loader").show(); }, 
      complete: function(){ jQuery("#loader").hide(); }, 
      success: function(response){ 
       jQuery("#model").html(response); 
       jQuery("#model").show(); 
      } 
     });   
    }); 

    }); 
    </script> 
+0

的東西似乎是工作,我只是得到了一個問題,爲什麼我們結合這'的jQuery(「主體」)。在(「變」,「選擇[NAME =‘系列’]」 ,function(){'''body'這是應該如何完成的?我只是不知道jquery,所以我想知道它的良好實踐和合法的解決方案,如果是的話,我一定會遵循:) – Mevia

+0

你告訴jquery,「身體」有一個動態變化 - 就像那裏是創建了一些新的元素,所以jquery基於新創建的html元素創建事件。您甚至可以縮小到選擇框加載的部分(id =「model」)。有關更多信息,請參閱https://learn.jquery.com/events/event-delegation/。 – Coder

+0

@ user2668182我相信這個答案值得你的投票! – Coder