如何将数据库的多个表值提取到动态选择框中

Question

在这里，我试图从我有10个表的数据库中将数据提取到组合框中。 我有两个组合框，在第一个框中，我从数据库中调用了option，这将是第一个表，并且该选项类似于a，b，c，d。 现在，当我在第一个框中选择“ a”时，它应该通过php调用相应的值，并且该值将来自另一个表，并且在两个表中都没有通用键。 与选择“ b”时相同，然后它将从第3个表中调用另一个值。

所以在这里我尝试了if else条件，但是我可以得到输出。 有人请改善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。此页面值应出现在第二个选择框中。与此类似，我还有另外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);
}
?>

提前致谢 ：）

Answer 1

考虑几个变化：

1. 当一个子级别的json（键/值对）成为多维javascript数组时，运行嵌套的for循环
2. 捕获第一个框的选定值： #a1_title
3. 有条件地关联用于动态输出的框
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>