2013-04-25 77 views
0

我需要創建三個動態下拉列表,第二個是基於第一個和第三個的選擇是基於第二的選擇,但我得到一個問題,第二個第三個顯示默認值沒有任何選項來選擇其他值填充動態下拉列表與PHP的MySQL的AJAX jquery

任何人都可以幫我嗎?

dbconfig.php
<?php 
$host = "localhost"; 
$user = "****"; 
$password = "****"; 
$db = "lam_el_chamel_db"; 
?> 

select.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
      $("select#district").attr("disabled","disabled"); 
      $("select#village").attr("disabled","disabled"); 
      $("select#governorate").change(function(){ 
      $("select#district").attr("disabled","disabled"); 
      $("select#district").html("<option>wait...</option>"); 
      var id = $("select#governorate option:selected").attr('value'); 
      $.post("select_district.php", {id:id}, function(data){ 
       $("select#district").removeAttr("disabled"); 
       $("select#district").html(data); 
      }); 
     }); 
     $("select#district option:selected").change(function(){ 
     id = $(this).val(); 
     $.post("select_village.php", {id:id}, function(data){ 
     $("select#village").attr("disabled","disabled"); 
     $("select#village").html("<option>wait...</option>"); 

     $("select#village").removeAttr("disabled"); 
     $("select#village").html(data); 
     }); 
     $("form#select_form").submit(function(){ 
      var cat = $("select#governorate option:selected").attr('value'); 
      var type = $("select#district option:selected").attr('value'); 
      var vil = $("select#village option:selected").attr('value'); 
      if(cat>0 && type>0 && vil>0) 
      { 
       var result = $("select#district option:selected").html(); 
       $("#result").html('your choice: '+result); 
      } 
      else 
      { 
       $("#result").html("you must choose two options!"); 
      } 
      return false; 
     }); 
    }); 
     </script> 
    </head> 
    <body> 
    <?php include "select.class.php"; ?> 
     <form id="select_form"> 
      Choose a governorate:<br /> 
      <select id="governorate" name = 'governorate'> 

      <?php echo $opt->ShowGovernorate(); ?> 


      </select> 
      <br /><br /> 

      choose a district:<br /> 
      <select id="district"> 
       <option value="0">choose...</option> 
      </select> 
      <br /><br /> 
      choose a village:<br /> 
      <select id="village"> 
       <option value="0">choose...</option> 
      </select> 
      <br /><br /> 
      <input type="submit" value="confirm" /> 
     </form> 
     <div id="result"></div> 
    </body> 
</html> 

select_class.php
<?php 
class SelectList 
{ 
    protected $conn; 

     public function __construct() 

     { 
      $this->DbConnect(); 
     } 
    protected function DbConnect() 
    { 
    include "dbconfig.php"; 
    $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database"); 
    mysql_select_db($db,$this->conn) OR die("can not select the database $db"); 
    return TRUE; 
    } 

    public function ShowGovernorate() 
    { 
      $sql = "SELECT * FROM governorate"; 
      $res = mysql_query($sql,$this->conn); 
      $governorate = '<option value="0">choose...</option>'; 
      while($row = mysql_fetch_array($res)) 
      { 
       $governorate .= '<option value="' . $row['governorate_id'] . '">' . $row['governorate_name'] . '</option>'; 
      } 
      return $governorate; 

    } 
    public function ShowDistrict() 
    { 
    $sql = "SELECT * FROM districts WHERE governorate_id=$_POST[id]"; 
    $res = mysql_query($sql,$this->conn); 
    var_dump($res); 
    $district = '<option value="0">choose...</option>'; 
     while($row = mysql_fetch_array($res)) 
     { 
     $district .= '<option value="' . $row['district_id'] . '">' . $row['district_name'] . '</option>'; 
     } 
    return $district; 
    } 

    public function ShowVillage() 
    { 
    $sql = "SELECT village_id, village_name FROM village WHERE district_id=$_POST[id]"; 
    $res = mysql_query($sql,$this->conn); 
    $village = '<option value="0">choose...</option>'; 
     while($row = mysql_fetch_array($res)) 
     { 
     $village .='<option value="' .$row['village_id'] . '">' . $row['village_name'] . '</option>'; 
     } 
     return $village; 
    } 


} 
$opt = new SelectList(); 


?> 

select_district.php
<?php 
include "select.class.php"; 
echo $opt->ShowDistrict(); 
?> 

select_village.php

<?php 
include "select.class.php"; 
echo $opt->ShowVillage(); 
?> 
+0

是的先生,因爲我沒有得到任何答案,我需要幫助PLZ,如果你可以幫助我,我會明白, – user2306354 2013-04-25 06:33:06

+0

檢查你的數據庫SELECT是否返回任何東西。 – 7stud 2013-04-25 06:42:07

回答

0
$("select#district option:selected").change(function(){ 
    id = $(this).val(); 
    $.post("select_village.php", {id:id}, function(data){ 
    $("select#village").attr("disabled","disabled"); 
    $("select#village").html("<option>wait...</option>"); 

    $("select#village").removeAttr("disabled"); 
    $("select#village").html(data); 
    }); 

嘗試

$("select#district").change(function(){ 
id = $(this).val(); 
    $("select#village").attr("disabled","disabled"); 
    $("select#village").html("<option>wait...</option>"); 
    $.post("select_village.php", {id:id}, function(data){ 


    $("select#village").removeAttr("disabled"); 
    $("select#village").html(data); 
    }); 
+0

@ joe lee這個解決方案沒有工作 – user2306354 2013-04-25 07:00:21

+0

@我在村莊表的字段名稱中有錯誤,所以didstrict填充成功,但村裏仍然沒有填充 – user2306354 2013-04-25 07:06:03

+0

$ .post(「select_village.php」,{id:id} ,功能(數據){..警報(數據)你看到了什麼? – 2013-04-25 07:27:31

0

我發現在代碼兩個錯誤已經土特產品粘貼。

  1. 的代碼所缺少的東西:

    $("select#district option:selected").change(function(){ 
         id = $(this).val(); 
         $.post("select_village.php", {id:id}, function(data){ 
          $("select#village").attr("disabled","disabled"); 
          $("select#village").html("<option>wait...</option>"); 
    
          $("select#village").removeAttr("disabled"); 
          $("select#village").html(data); 
         }); }); //You have missed this one 
    
  2. 在aboove你添加的東西是不好改變的代碼這一個:

    $(「#選擇選項區:選擇「).change(函數(){

這樣:

$("select#district").change(function(){