第三个下拉列表基于第二个和第一个下拉选择填充答案

【问题标题】：Third dropdown populated based from second and first dropdown selections第三个下拉列表基于第二个和第一个下拉选择填充
【发布时间】：2023-03-14 16:00:01
【问题描述】：

我正在创建一个将数据插入数据库的内部网络工具。我试图找出如何创建一个三层下拉选择，我将在其中将第三个下拉列表的值插入到数据库中。

我在这里偶然发现了这个答案： Populate another select dropdown from database based on dropdown selection

但是是作为两层下拉菜单完成的。我的php代码是这样的：

  <?php
  require 'connect.php';
  $query = "SELECT customer_id,customer FROM schema.customer";
  $result = $DB_con->query($query);

  while($row = $result->fetch(PDO::FETCH_ASSOC)){
    $categories[] = array("customer_id" => $row['customer_id'], "customer" => $row['customer']);
  }

  $query = "SELECT contract_id, customer_id, contract FROM schema.contract";
  $result = $DB_con->query($query);

  while($row = $result->fetch(PDO::FETCH_ASSOC)){
    $subcats[$row['customer_id']][] = array("contract_id" => $row['contract_id'], "contract" => $row['contract']);
  }


// Third dropdown which isn't originally included with the previous answer
  $query = "SELECT subcontract_id, contract_id, subcontract FROM schema.subcontract";
  $result = $DB_con->query($query);

  while($row = $result->fetch(PDO::FETCH_ASSOC)){
    $subsubcats[$row['contract_id']][] = array("subcontract_id" => $row['subcontract_id'], "subcontract" => $row['subcontract']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);
  $jsonSubSubCats = json_encode($subsubcats);
?>

现在，给出的答案是这样的：

<head>
    <script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
        //Below wasn't part of the answer
        echo "var subsubcats = $jsonSubSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 0; i < categories.length; i++){
          select.options[i] = new Option(categories[i].customer,categories[i].customer_id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var customer_id = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[customer_id].length; i++){
          subcatSelect.options[i] = new Option(subcats[customer_id][i].contract,subcats[customer_id][i].contract_id);
        }
      }
    </script>

  </head>

  <body onload='loadCategories()'>
    <select id='categoriesSelect'>
    </select>

    <select id='subcatsSelect'>
    </select>
  </body>
</html>

但我需要根据第二个下拉选择的第三层选项的帮助。提前致谢。 :)

【问题讨论】：

您可以参考以下JSFiddle 供参考
嗨@Rajesh：用户想要基于第二个下拉菜单的第三个下拉菜单。您提供的 JSFiddle 与相应的下拉列表有关联。
我知道使用 jquery 或 Ajax。这个方法我不知道。否则，我会写答案。
哦，先生。任何方法都会对我有所帮助。 :)

标签： javascript php html drop-down-menu

【解决方案1】：

能够弄清楚。

<script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
        echo "var subsubcats = $jsonSubSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 0; i < categories.length; i++){
          select.options[i] = new Option(categories[i].customer,categories[i].customer_id);          
        }
      }
      function updateSubCats(){
        var customer_id = this.value;
        var subcatSelect = document.getElementById("subcatsSelect")
        subcatSelect.onchange = updateSubSubCats;;
        for(var i = 0; i < subcats[customer_id].length; i++){
          subcatSelect.options[i] = new Option(subcats[customer_id][i].contract,subcats[customer_id][i].contract_id);
        }
      }
      function updateSubSubCats(){
        var subsubcatSelect = this;
        var contract_id = this.value;
        var subsubcatSelect = document.getElementById("subsubcatsSelect");
        subsubcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subsubcats[contract_id].length; i++){
          subsubcatSelect.options[i] = new Option(subsubcats[contract_id][i].subcontract,subsubcats[contract_id][i].subcontract_id);
        }
      }
    </script>

【讨论】：