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

时间:2016-01-18 13:29:31

标签: javascript php html drop-down-menu

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

我在这里偶然发现了这个答案: 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>

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

1 个答案:

答案 0 :(得分:0)

能够弄清楚。

    TextFlow textWrapper = new TextFlow(_title);
    FlowPage flowPage = new FlowPage();
    flowPage.add(textWrapper);