Javascript 根据第二个和第一个下拉选择填充第三个下拉列表

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

我在这里偶然发现了这个答案：

但它是作为两层下拉列表完成的。 我的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);
?>

函数loadCategories（）{
var select=document.getElementById（“分类选择”）；
select.onchange=updateSubCats；
对于（变量i=0；i

---

但是我需要第二个下拉选择的第三层选项的帮助。提前感谢。：）

我们能够找到答案

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

函数loadCategories（）{
var select=document.getElementById（“分类选择”）；
select.onchange=updateSubCats；
对于（变量i=0；i

您可以参考以下内容hi@Rajesh：用户希望在第二个下拉列表的基础上获得第三个下拉列表。您提供的JSFIDLE与相应的下拉列表有一定的关系。我知道使用jquery或Ajax。这个方法我不知道。否则，我会书面回答的。哦，先生。。任何方法都会对我有帮助。：）

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