2016-08-24 94 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然后,只更改查询表名称和列名称是你的。 –