Third dropdown populated based from second and first dropdown selections

I am creating an internal web tool that inserts data into a database. I was trying to find out how to create a three-tier dropdown selection, where I would insert the third dropdown's value into the DB.

I stumbled across this answer here: Populate another select dropdown from database based on dropdown selection

But was done as a two tier dropdown. My php code is this:

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

Now, the given answer was this:

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

But I needed help with the third tier options based from the second dropdown selection. Thanks in Advance. :)

Answers


Was able to figure it out.

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

Need Your Help

How to join two tables on some condition

sql join

Table1 is 6000 rows of numbers in colA and W or A in colB, and this works nicely