使用PHP MySql檢索數據到ajax下拉菜單jQuery

我使用Jquery/PHP/MySql創建動態多個國家/地區下拉菜單。這工作得很好，並在MySQL數據庫的每個用戶這樣(usertable)我store/put國家/國家/鎮：使用PHP MySql檢索數據到ajax下拉菜單jQuery

id | country | state | town | 
1 |  1  | 1 | 1 | 
2 |  1  | 1 | 3 | 
3 |  1  | 2 | 8 |

現在edituser.php頁，我需要fetch/retrieve MySQL數據(usertable)我的jQuery的/ Ajax的下拉列表。我打電話edituser.php?id=1現在我需要打印/顯示用戶數據dropdown Ajax編輯國家/州/鎮用戶。

我該怎麼辦檢索/打印/顯示這個？

JS：

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> 
// jquery library file 
<script type="text/javascript"> 

/*This function is called when state dropdown value change*/ 
function selectState(state_id){ 
    if(state_id!="-1"){ 
    loadData('city',state_id); 
    }else{ 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
    } 
} 

/*This function is called when city dropdown value change*/ 
function selectCity(country_id){ 
if(country_id!="-1"){ 
    loadData('state',country_id); 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
}else{ 
    $("#state_dropdown").html("<option value='-1'>Select state</option>"); 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
} 
} 

/*This is the main content load function, and it will 
    called whenever any valid dropdown value changed.*/ 
function loadData(loadType,loadId){ 
    var dataString = 'loadType='+ loadType +'&loadId='+ loadId; 
    $("#"+loadType+"_loader").show(); 
    $("#"+loadType+"_loader").fadeIn(400). 
     html('Please wait... <img src="image/loading.gif" />'); 
    $.ajax({ 
    type: "POST", 
    url: "loadData.php", 
    data: dataString, 
    cache: false, 
    success: function(result){ 
     $("#"+loadType+"_loader").hide(); 
     $("#"+loadType+"_dropdown"). 
     html("<option value='-1'>Select "+loadType+"</option>"); 
     $("#"+loadType+"_dropdown").append(result); 
    } 
    }); 
} 
</script>

HTML：

/*This code will show country dropdown list*/ 
<select onchange="selectCity(this.options[this.selectedIndex].value)"> 
    <option value="-1">Select country</option> 
    <?php 
    while($rowCountry=mysql_fetch_array($resCountry)){ 
    ?> 
    <option value="<?php echo $rowCountry['id']?>"> 
      <?php echo $rowCountry['country_name']?> 
    </option> 
    <?php 
    } 
    ?> 
</select> 

/*State dropdown list*/ 
<select id="state_dropdown" 
    onchange="selectState(this.options[this.selectedIndex].value)"> 
<option value="-1">Select state</option> 
</select> 
<span id="state_loader"></span> 

/*City dropdown list*/ 
<select id="city_dropdown"> 
<option value="-1">Select city</option> 
</select> 
<span id="city_loader"></span>

Loaddata.php

include('dbConnect.inc.php'); 
$loadType=$_POST['loadType']; 
$loadId=$_POST['loadId']; 

if($loadType=="state"){ 
    $sql="select id,state_name from state_test where 
     country_id='".$loadId."' order by state_name asc"; 
}else{ 
    $sql="select id,city_name from city_test where 
     state_id='".$loadId."' order by city_name asc"; 
} 
$res=mysql_query($sql); 
$check=mysql_num_rows($res); 
if($check > 0){ 
    $HTML=""; 
    while($row=mysql_fetch_array($res)){ 
     $HTML.="<option value='".$row['id']."'>".$row['1']."</option>"; 
    } 
    echo $HTML; 
}

來源

2014-03-29 Pink Code

。這種做法似乎是正確的。 – Victory

你有很多事情會讓你的代碼看起來更好，工作更好，我在回答中寫了一些代碼，並給你一個如何實現你要找的東西的例子。 – Chococroc

我天衣劍道UI下拉窗口小部件會解決這個問題。有它的級聯功能

來源

2014-03-29 10:37:34 bendenizHakan

很少有想着你的代碼

使用AJAX，嘗試使用JSON發送和檢索數據，這將要給大家介紹的VAR和UI更多的自由。
當你使用jQuery時，儘量使用它，而不是定義在線事件，如果你將它們分組在腳本中，它將更容易管理它。
關於選擇，它是相當棘手的重新加載它們。在IE中我記得我無法添加選項，因此，您必須加載全局選擇。
不要使用PHP的mysql_query函數，相當不推薦使用。閱讀並應用此：How can I prevent SQL injection in PHP?
當從AJAX裝載值，您必須將處理程序附加到DOM元素，這就是爲什麼使用。對（）函數，以確保它的處理程序附加的元素。
嘗試使用jQuery的新庫，因爲他們速度更快，功能強大，並提高了性能，1.4是很老...

我寫給你們的下拉菜單的例子使用上面的東西，國家給你如何實現它的線索，採取什麼你覺得你喜歡它：

的index.html：

<html> 

    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    </head> 

    <body> 

    <script> 
    $(document).ready(function() { 
     $(document).on('change', '#div_country select, #div_state select', function() { 
      var $type = $(this).attr('data-type'); 
      var $id = $(this).val(); 

      if ($id != -1) { 
       loadSelect($type, $id); 
      } 

     }); 

     function loadSelect($type, $id) { 
      $.ajax({ 
       type: 'post', 
       url: 'states.php', 
       cache: false, 
       data: { 
        'type': $type 
       , 'id': $id 
       }, 
       dataType: 'json', 
       success: function (data) { 
        if (data.result == true) { 
         if (data.html !== undefined) { 
          var $div = ''; 
          if ($type == 'country') { 
           $div = 'state'; 
          } else { 
           $div = 'city'; 
          } 
          $("#div_" + $div).html(data.html); 
         } 
        } else { 
         alert('Something went wrong!'); 
        } 
       } 
      }); 
     } 

    }); 
    </script> 

    <div id="div_country"> 
     <select data-type="country"> 
      <option value="-1">Select Country</option> 
      <option value="1">Spain</option> 
      <option value="2">France</option> 
      <option value="3">Germany</option> 
     </select> 
    </div> 

    <div id="div_state"> 
     <select data-type="state"> 
      <option value="-1">Select Country</option> 
     </select> 
    </div> 

    <div id="div_city"> 
     <select> 
      <option value="-1">Select State</option> 
     </select> 
    </div> 

    </body> 
</html>

狀態。PHP

<?php 
$type = isset($_POST['type']) ? $_POST['type'] : ''; 

if (!empty($type)) { 
    switch ($type) { 
     case 'country': 
      $result = true; 
      $html = '<select data-type="state"> 
         <option value="-1">Select State</option> 
         <option value="1">state 1</option> 
         <option value="2">state 2</option> 
        </select>'; 
     break; 
     case 'state': 
      $result = true; 
      $html = '<select data-type="city"> 
         <option value="-1">Select City</option> 
         <option value="1">city 1</option> 
         <option value="2">city 2</option> 
        </select>'; 
     break; 
     default: 
      $result = false; 
      $html = ''; 
     break; 
    } 
} 

$data = array(
    'result' => $result, 
    'html' => $html 
);

我加給你一個關於如何實現它的線索，它是一個獨立的例子，你會看到保管箱的變化。你將不得不添加PHP邏輯，但我想告訴你一個更好的方法，當你運行這個程序時，你看到`image/loading.gif`我想知道在哪裏調用失敗了，XD

來源

2014-03-29 11:36:25 Chococroc

使用PHP MySql檢索數據到ajax下拉菜單jQuery

回答

相關問題