2016-08-24 96 views
0

我有5個表的數據庫。每個表是前一個的subcatagory,叫做:用sql ajax級聯下拉菜單

  • 國家
  • 狀態
  • 城市
  • 郵編
  • 街道

現在我有3個下拉菜單這取決於每個其他。所以當我選擇countries: USA時,下一個下拉列表只會顯示美國各州等。這是有效的。

但是現在我想擴展到5個下拉列表,所以再加上2個下拉列表。

我沒有顯示我試圖添加2個以上,因爲它可能只會使它更復雜。

所以我展示3個下拉菜單,現在正在努力:

文件:ajax.php

<?php 
//dbConfig is not added here, but it connects to database 
include('dbConfig.php'); 

if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){ 
//Get all state data 
$query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC"); 

//Count total number of rows 
$rowCount = $query->num_rows; 

//Display states list 
if($rowCount > 0){ 
    echo '<option value="">Select state</option>'; 
    while($row = $query->fetch_assoc()){ 
     echo '<option  value="'.$row['state_id'].'">'.$row['state_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">State not available</option>'; 
} 
} 

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){ 
//Get all city data 
$query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC"); 

//Count total number of rows 
$rowCount = $query->num_rows; 

//Display cities list 
if($rowCount > 0){ 
    echo '<option value="">Select city</option>'; 
    while($row = $query->fetch_assoc()){ 
     echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>'; 
    } 
}else{ 
    echo '<option value="">City not available</option>'; 
} 
} 
?> 

****The index.php-file**** (I didn't add the css): 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#country').on('change',function(){ 
    var countryID = $(this).val(); 
    if(countryID){ 
     $.ajax({ 
      type:'POST', 
      url:'ajaxData.php', 
      data:'country_id='+countryID, 
      success:function(html){ 
       $('#state').html(html); 
       $('#city').html('<option value="">Select state first</option>'); 
      } 
     }); 
    }else{ 
     $('#state').html('<option value="">Select country first</option>'); 
     $('#city').html('<option value="">Select state first</option>'); 
    } 
}); 

$('#state').on('change',function(){ 
    var stateID = $(this).val(); 
    if(stateID){ 
     $.ajax({ 
      type:'POST', 
      url:'ajaxData.php', 
      data:'state_id='+stateID, 
      success:function(html){ 
       $('#city').html(html); 
      } 
     }); 
    }else{ 
     $('#city').html('<option value="">Select state first</option>'); 
    } 
}); 
}); 
</script> 
</head> 
<body> 
<div class="select-boxes"> 
<?php 
//Include database configuration file 
include('dbConfig.php'); 

//Get all country data 
$query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC"); 

//Count total number of rows 
$rowCount = $query->num_rows; 
?> 
<select name="country" id="country"> 
    <option value="">Select Country</option> 
    <?php 
    if($rowCount > 0){ 
     while($row = $query->fetch_assoc()){ 
      echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>'; 
     } 
    }else{ 
     echo '<option value="">Country not available</option>'; 
    } 
    ?> 
</select> 

<select name="state" id="state"> 
    <option value="">Select country first</option> 
</select> 

<select name="city" id="city"> 
    <option value="">Select state first</option> 
</select> 
</div> 
</body> 
</html> 
+0

所以有什麼問題? –

+0

我需要2個更多的下拉菜單的表'郵編'和'街道'。郵政編碼是「城市」的一個子類別。街道是'郵編'的子類別。 –

回答

0

您需要創建兩個表郵政編碼和街道在街道郵編表,並zip_id添加city_id表

<select name="zipcode" id="zipcode"> 
    <option value="">Select Zipcode first</option> 
</select> 

<select name="streets" id="streets"> 
     <option value="">Select Streets first</option> 
</select> 

jQuery的Scrtipt

$('#city').on('change',function(){ 
    var cityId = $(this).val(); 
    if(cityId){ 
     $.ajax({ 
      type:'POST', 
      url:'ajaxData.php', 
      data:'city_id='+cityId, 
      success:function(html){ 
       $('#zipcode').html(html); 
      } 
     }); 
    }else{ 
     $('#zipcode').html('<option value="">Select zipcode first</option>'); 
    } 
}); 
}); 

$('#zipcode').on('change',function(){ 
    var zipId = $(this).val(); 
    if(zipId){ 
     $.ajax({ 
      type:'POST', 
      url:'ajaxData.php', 
      data:'zip_id='+zipId, 
      success:function(html){ 
       $('#streets').html(html); 
      } 
     }); 
    }else{ 
     $('#streets').html('<option value="">Select Streets first</option>'); 
    } 
}); 
}); 

PHP代碼是一樣的狀態,只需要改變表名和字段

通過此你郵政編碼和街道的級聯下拉菜單。

+0

謝謝卡姆萊斯。我必須用數據替換數據:'zip_id ='+ zipId:'zipcode_id ='+ zipId。只是提到它,所以新的訪問者可以從中受益。此外,ajaxData需要適應新的下拉菜單,但這是一個複製/粘貼和替換表名等問題。謝謝謝謝,謝謝,你太棒了! –

+0

歡迎..你可以接受.. :) –

0

見,我修改你的代碼一點點。

我對您的street & zipcode表列名稱或下拉列表沒有任何意見。我承擔並做到了。 在下拉或查詢中隨時隨地更改它。 它會幫助你。 通過它。

而且,如果有任何疑問,請隨時提問。

的index.php

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

    </head> 
    <body> 
    <div class="select-boxes"> 
     <?php include('dbConfig.php'); //Include database configuration file ?> 
     <div class="country"> 
     <?php 
     $query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC"); 
     $rowCount = $query->num_rows; 
     ?> 
     <select name="country" id="country"> 
      <option value="">Select Country</option> 
      <?php 
      if ($rowCount > 0) { 
      while ($row = $query->fetch_assoc()) { 
       echo '<option value="' . $row['country_id'] . '">' . $row['country_name'] . '</option>'; 
      } 
      } else { 
      echo '<option value="">Country not available</option>'; 
      } 
      ?> 
     </select> 
     </div> 

     <div class="showStateCity"> 
     <select name="state" id="state"> 
      <option value="">Select country first</option> 
     </select> 
     <select name="city" id="city"> 
      <option value="">Select state first</option> 
     </select> 

     <select name="zipcode" id="zipcode"> 
      <option value="">Select City first</option> 
     </select> 

     <select name="streets" id="streets"> 
      <option value="">Select Zipcode first</option> 
     </select> 

     </div> 

    </div> 
    </body> 
</html> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#country').on('change',function(){ 
     getStateCityZipCodeStreets(); 
    }); 

    $('#state').on('change',function(){ 
     getStateCityZipCodeStreets(); 
    }); 

    $('#city').on('change',function(){ 
     getStateCityZipCodeStreets(); 
    }); 

    $('#zipcode').on('change',function(){ 
     getStateCityZipCodeStreets(); 
    }); 

    function getStateCityZipCodeStreets(){ 
     var country = $('#country').val(); 
     var state = $('#state').val(); 
     var city = $('#city').val(); 
     var zipcode = $('#zipcode').val(); 

     $.ajax({ 
      type:'POST', 
      url:'ajaxData.php', 
      data:{country_id:country, state_id :state, city_id : city, zipcode_id : zipcode}, 
      cache:false, 
      success:function(data){ 
      $('.showStateCity').html(data); 
      } 
     }); 
    } 
    }); 
</script> 

ajaxData.php

<?php 
//dbConfig is not added here, but it connects to database 
include('dbConfig.php'); 

/*States*/ 
$queryState = "SELECT * FROM states WHERE 1=2"; 
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){ 
    $queryState = "SELECT * FROM states WHERE status = 1 AND country_id =".$_POST['country_id']." ORDER BY state_name ASC"; 
} 
$execQueryState = $db->query($queryState); 
$rowCountState = $execQueryState->num_rows; 

/*City*/ 
$queryCity = "SELECT * FROM cities WHERE 1=2"; 
if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){ 
    $queryCity = "SELECT * FROM cities WHERE status = 1 AND state_id".$_POST['state_id']." ORDER BY city_name ASC"; 
} 
$execQueryCity = $db->query($queryCity); 
$rowCountCity = $execQueryCity->num_rows; 

/*ZipCode*/ 
$queryZipcode = "SELECT * FROM zipcode WHERE 1=2"; 
if(isset($_POST["city_id"]) && !empty($_POST["city_id"])){ 
    $queryZipcode = "SELECT * FROM zipcode WHERE status = 1 AND city_id".$_POST['city_id']." ORDER BY zipcode ASC"; 
} 
$execQueryZipCode = $db->query($queryZipcode); 
$rowCountZipCode = $execQueryZipCode->num_rows; 

/*Streets*/ 
$queryStreets = "SELECT * FROM streets WHERE 1=2"; 
if(isset($_POST["zipcode_id"]) && !empty($_POST["zipcode_id"])){ 
    $queryStreets = "SELECT * FROM streets WHERE status = 1 AND zipcode_id".$_POST['zipcode_id']." ORDER BY street_name ASC"; 
} 
$execQueryStreets = $db->query($queryStreets); 
$rowCountStreets = $execQueryStreets->num_rows; 
?> 

<select name="state" id="state"> 
    <option value="">Select country first</option> 
    <?php 
    if($rowCountState > 0){ 
    while($rowState = $execQueryState->fetch_assoc()){ 
    ?> 
    <option value="<?php echo $rowState['state_id'];?>"><?php echo $rowState['state_name'];?></option> 
    <?php } 
    } else {?> 
    <option value="">State Not Available</option> 
    <?php }?> 
</select> 

<select name="city" id="city"> 
    <option value="">Select state first</option> 
    <?php 
    if($rowCountCity > 0){ 
    while($rowCity = $execQueryCity->fetch_assoc()){ 
    ?> 
    <option value="<?php echo $rowCity['city_id'];?>"><?php echo $rowCity['city_name'];?></option> 
    <?php } 
    } else {?> 
    <option value="">City Not Available</option> 
    <?php }?> 
</select> 

<select name="zipcode" id="zipcode"> 
    <option value="">Select City first</option> 
    <?php 
    if($rowCountZipCode > 0){ 
    while($rowZipCode = $execQueryZipCode->fetch_assoc()){ 
    ?> 
    <option value="<?php echo $rowZipCode['zipcode_id'];?>"><?php echo $rowZipCode['zipcode'];?></option> 
    <?php } 
    } else {?> 
    <option value="">ZipCode Not Available</option> 
    <?php }?> 
</select> 

<select name="streets" id="streets"> 
    <option value="">Select ZipCode first</option> 
    <?php 
    if($rowCountStreets > 0){ 
    while($rowStreets = $execQueryStreets->fetch_assoc()){ 
    ?> 
    <option value="<?php echo $rowStreets['street_id'];?>"><?php echo $rowStreets['street_name'];?></option> 
    <?php } 
    } else {?> 
    <option value="">Streets Not Available</option> 
    <?php }?> 
</select> 
+0

你好娜娜Partykar,謝謝。當我使用腳本時,我可以選擇一個國家和一個州,但第三,第四和第五個下拉列表不會填充。 –

+0

你有沒有檢查我的代碼。郵政編碼/街道的表名稱,欄目名稱與您的相同。請檢查一下。並且,請檢查所有這些下拉ID。是否所有的ID都被正確地調用。因爲,在我的系統中工作@JandeVries。請在回顧後回覆。 –

+0

請使用我的整個代碼@JandeVries然後,只更改查詢表名稱和列名稱是你的。 –