doujiang5211 2016-02-20 17:41
浏览 60
已采纳

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

here i'm trying to fetch data into combobox from database in which i have 10 table. i have two combo box, in first box i called option from database which will be the first table and the option like a, b, c, d. Now when i'm selecting 'a' in first box then it should called the corresponding value through php and that value will be come from another table and there is nothing common key in both of them tables. Same as when selecting 'b' then it will call the another value from the 3rd table.

So here i was trying with the if else condition but i'm able get output . somebody please improve jquery mistake , in which way i should match the condition of it .

here's my code html page

    <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>

This is drpdown.php page .This page value will successfully coming in first select box.

<?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
"); 
$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);
}
?>

Here the lulc_db.php .This page value should come in second select box.Same like this i have 8 other php page ,which i have show into second combobox.

    <?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);
}
?>

Thanks in advanced :)

  • 写回答

1条回答 默认 最新

  • dpfln86244 2016-02-21 18:05
    关注

    Consider several changes:

    1. Run nested for loops as one child level json (key/value pair) becomes a multi-dimensional javascript array
    2. Capture the selected value of first box: #a1_title
    3. Conditionally relate boxes for the dynamic output
    4. Remove existing items before appending new items

    While I cannot re-create your example without data and table relationships. Below is a generalized example using programming languages trying to maintain your initial code. Adjust for your actual script. See demo on jsfiddle (but this uses embedded json strings with click events):

    PHP Scripts (to reproduce json data)

    // 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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵