2016-02-20 58 views
0

這裏我試圖從數據庫中提取數據到其中我有10個表。我有兩個組合框,在第一個框中,我從數據庫中調用了選項,這將是第一個表格,以及像a,b,c,d這樣的選項。現在,當我在第一個框中選擇'a'時,它應該通過php調用相應的值,並且該值將來自另一個表,並且這兩個表中都沒有任何公用鍵。 與選擇'b'時相同,它將調用第三個表中的另一個值。如何將多個表的數據庫值存入動態選擇框

所以,我在這裏嘗試了if if條件,但我能夠得到輸出。 有人請提高jquery的錯誤,以哪種方式我應該匹配它的條件。

這裏是我的代碼的HTML頁面

<html> 
    <body> 
    <select id="a1_title"> 
    </select> 
    <select id="a2_title"> 
    </select> 
    <script src="jquery-2.0.3.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $.getJSON("drpdwn.php", success = function(data){ 
    var items=""; 
     for(var i = 0; i< data.length; i++){ 
      items +="<option value='"+ data[i].toLowerCase() +"'>" + data[i] +"</option>"; 
     } 
     $("#a1_title").append(items); 
     $("#a1_title").change(); 
     }); 
    $("#a1_title").change(function(){ 
    if(data.length == 1) // here i have tried to match the condition from ID but it doesn't work 
{ 
    alert("b"); 
     $.getJSON("lulc_db.php",success = function(data){ 
    alert("okay"); 
     var items=""; 
     for(var i = 0; i< data.length; i++){ 
      items+="<option value='"+data[i].toLowerCase()+"'>"+data[i]+"</option>"; 
     } 
else if(data.length == 2) 
{ 
    alert("b"); 
     $.getJSON("soil_db.php",success = function(data){ 
    alert("okay"); 
     var items=""; 
     for(var i = 0; i< data.length; i++){ 
      items+="<option value='"+data[i].toLowerCase()+"'>"+data[i]+"</option>"; 
     } 
     $("#a2_title").append(items); 

     }); 
    } 
    }); 

}); 
</script> 
</body></html> 

這是drpdown.php頁。這頁值將在第一個選擇框中成功的到來。

<?php 
$host = "localhost"; 
$user = "postgres"; 
$pass = "admin"; 
$db = "Querybuilderdb"; 

$con = pg_connect("host=$host dbname=$db user=$user password=$pass") 
    or die ("Could not connect to server\n"); 
$query = "SELECT id, name FROM tab"; 
$result = pg_query($con, $query); 
if(pg_num_rows($result)){ 

$data=array(); 
while($row=pg_fetch_array($result)) 
{ array_push($data, $row["name"]); 

} 

echo json_encode($data); 
} 
?> 

這裏lulc_db.php。這頁值應排在第二選擇box.Same這樣我有8其他PHP頁面,我已經表明進入第二個下拉框。

<?php 
require "config.php"; 
$query = "SELECT distinct level_1 FROM pachgaon_LULC"; 
$result = pg_query($con, $query); 
if(pg_num_rows($result)){ 
$data=array(); 
while($row=pg_fetch_array($result)) 
{ array_push($data, $row["level_1"]); 
} 
echo json_encode($data); 
} 
?> 

在先進的感謝:)

+0

您可能需要嵌套的'for'循環。看到這個[post](http://stackoverflow.com/questions/800593/loop-through-json-object-list)通過json循環。考慮js對象中的鍵/值對:'$ .each(data,function(key,val){...})' – Parfait

+0

我不能應用循環,因爲我想要的結果只有通過選擇第一個框然後它會調用php頁面,並將結果提取到第二個組合框中。 – ads

+0

從這個問題的答案中得到一些想法。 http://stackoverflow.com/questions/11451150/create-dynamic-combobox-using-php-and-onselection-change-values-of-another-dynam .hope這有助於.. :) – aimme

回答

1

考慮一些變化:

  1. 運行嵌套for環路爲一個子級別JSON(鍵/值對)變成 多維JavaScript數組
  2. 捕獲第一個框的選定值:#a1_title
  3. 有條件地關聯dy NAMIC輸出
  4. 刪除追加新項目

雖然我不能再創建一個沒有數據和表之間的關係的例子之前現有的項目。以下是使用編程語言試圖維護您的初始代碼的一個通用示例。調整您的實際腳本。查看jsfiddle演示(但使用與click事件嵌入式JSON字符串):

PHP腳本(重現JSON數據)

// DynamicOptions1.php 
<?php 
    $languages = []; 

    $languages[][1] = "general purpose"; 
    $languages[][2] = "special purpose"; 

    echo json_encode($languages); 
?> 

// DynamicOptions2.php 
<?php 
    $general = []; 

    $general[][1] = "Java"; 
    $general[][2] = "PHP"; 
    $general[][3] = "Perl"; 

    echo json_encode($general); 
?> 

// DynamicOptions3.php 
<?php 
    $special = []; 

    $special[][1] = "SQL"; 
    $special[][2] = "XSLT"; 

    echo json_encode($special); 
?> 

HTML/JQuery的

<html> 
    <body> 
    <select id="a1_title"> 
    </select> 
    <select id="a2_title"> 
    </select> 

    <script src="jquery-2.0.3.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $.getJSON("DynamicOptions1.php", success = function(data){ 
      var items=""; 

      for(var i = 0; i< data.length; i++){ 
       for (var item in data[i]) { 
       // RETAIN JSON KEY AS OPTION VALUE, JSON VALUE AS OPTION TEXT 
       items +="<option value='"+item+"'>" + data[i][item].toLowerCase() +"</option>"; 
       } 
      } 
      $("#a1_title").append(items); 
      $("#a1_title").change(); 
     }); 

     $("#a1_title").change(function(){ 
      // OBTAIN SELECTED VALUE 
      var selectedValue = $(this).find(":selected").val(); 

      if(selectedValue == "1") {    
       $.getJSON("DynamicOptions2.php",success = function(data){    
        var items=""; 
        for(var i = 0; i< data.length; i++){ 
        for (var item in data[i]) {      
         items+="<option value='"+data[i][item]+"'>" + data[i][item].toLowerCase() +"</option>"; 
        } 
        } 
        // REMOVE PREVIOUS ITEMS 
        var myNode = document.getElementById("a2_title"); 
        while (myNode.firstChild) { 
         myNode.removeChild(myNode.firstChild); 
        } 
        // ADD NEW ITEMS 
        $("#a2_title").append(items); 
       }); 
      } 
      else if(selectedValue == "2") {    
       $.getJSON("DynamicOptions3.php",success = function(data){    
        var items=""; 
        for(var i = 0; i< data.length; i++){ 
        for (var item in data[i]) { 
         items+="<option value='"+data[i][item].toLowerCase()+"'>"+data[i][item].toLowerCase()+"</option>"; 
        } 
        } 
        // REMOVE PREVIOUS ITEMS 
        var myNode = document.getElementById("a2_title"); 
        while (myNode.firstChild) { 
         myNode.removeChild(myNode.firstChild); 
        } 
        // ADD NEW ITEMS 
        $("#a2_title").append(items);  
       }); 
      }   
     }); 

     }); 
     </script> 

</body> 
</html> 
+0

此代碼包含一些問題。它的顯示值,但給出了每一個選項的重複,如bbbbbbbbbbbbbbbbbb,cccccc,並且當我選擇第一個框的另一個選項時,不改變第二個組合框的值。 – ads

+0

請將您的json或sql數據以及選擇選項之間的相關規則/邏輯(例如,如果在第一個下拉列表中選擇類別1,則在第二個下拉列表中顯示這些項目)。 – Parfait

+0

謝謝,但它的工作現在我只需要刪除「for(var item in data [i])」,因爲它給出了多個值。 :) – ads

相關問題