javascript - 数据库驱动的三个选择列表

Question

我正在尝试创建一个包含三个选择下拉列表的表单。用户从 select1 中选择一个选项，并根据所选选项填充 select2，然后用户从 select2 中选择一个选项，并根据选择填充 select3。

按照 stackoverflow 上的示例我创建了这个。列表填充得很好，但当我点击提交按钮时，值没有传递。如果我从 select1 和 select2 中选择选项，那么值就会被传递，但是当我从 select3 中选择选项时，则不会传递任何值。

这是我的 PHP:

            <?php
          require "php/db.inc";
          $db = new mysqli($hostName, $username, $password,'mms');//set your database handler

          $query = "SELECT AcID, AcName FROM accounts WHERE ParentAcID ='0'";
          $result = $db->query($query);

          while($row = $result->fetch_assoc()){
            $accountgroups[] = array("id" => $row['AcID'], "val" => $row['AcName']);
          }

          $query = "SELECT AcID, AcName, ParentAcID FROM accounts";
          $result = $db->query($query);

          while($row = $result->fetch_assoc()){
            $accounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
          }

          $query = "SELECT AcID, AcName, ParentAcID FROM accounts";
          $result = $db->query($query);

          while($row = $result->fetch_assoc()){
            $subaccounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
          }

          $jsonAcGroup = json_encode($accountgroups);
          $jsonAc = json_encode($accounts);
          $jsonSubAc = json_encode($subaccounts);
        ?>

这是我的 JavaScript:

<script type='text/javascript'>
  <?php
    echo "var account_group = $jsonAcGroup; \n";
    echo "var accounts = $jsonAc; \n";
    echo "var sub_accounts = $jsonSubAc; \n";
  ?>
  function loadAccountGroup(){
    var select = document.getElementById("AcGroupSelect");
    select.onchange = updateAccount;
    for(var i = 0; i < account_group.length; i++){
      select.options[i] = new Option(account_group[i].val,account_group[i].id);          
    }
  }
  function updateAccount(){
    var catSelect = this;
    var catid = this.value;
    var subcatSelect = document.getElementById("AcSelect");
    AcSelect.options.length = 0; //delete all options if any present
    subcatSelect.onchange = updateSubAccount;
    for(var i = 0; i < accounts[catid].length; i++){
      subcatSelect.options[i] = new Option(accounts[catid][i].val,accounts[catid][i].id);
    }
  }

  function updateSubAccount(){
    var catSelect2 = this;
    var catid2 = this.value;
    var subcatSelect2 = document.getElementById("SubAcSelect");
    SubAcSelect.options.length = 0; //delete all options if any present
    for(var i = 0; i < sub_accounts[catid2].length; i++){
      subcatSelect2.options[i] = new Option(sub_accounts[catid2][i].val,sub_accounts[catid2][i].id);
    }
  }


  function start() {
    loadAccountGroup();
    updateAccount();
    updateSubAccount();
                   }
    window.onload = start;  
</script>

这是我的表格:

<form class="form" method="post" action="form_test.php">

<table class='table table-striped'>
    <tr>
        <td>
            <div class="form-group">
                <label for="Companyname" class="control-label">Account Group</label>
          </div>
        </td>
        <td>
            <div class="form-group">
                <label for="Companyname" class="control-label">Account</label>
          </div>
        </td>
        <td>
            <div class="form-group">
                <label for="Companyname" class="control-label">Sub Account</label>
          </div>
        </td>
        <td>
            <div class="form-group">
                <label for="Companyname" class="control-label">Debit</label>
          </div>
        </td>
        <td>
            <div class="form-group">
                <label for="Companyname" class="control-label">Credit</label>
          </div>
        </td>

    </tr>


    <tr>
        <td>
            <div class="form-group">
                <select class="form-control" name="AcGroupSelect" id='AcGroupSelect'></select>
          </div>
        </td>
        <td>
            <div class="form-group">
                <select class="form-control" name="AcSelect" id='AcSelect'></select>
          </div>
        </td>
        <td>
            <div class="form-group">
                <select class="form-control" name="SubAcSelect" id='SubAcSelect'></select>
          </div>
        </td>
        <td>
            <div class="form-group">
                <input type="text" class="col-sm-1 form-control" name="DebitAmount" placeholder="Debit Amount">
          </div>
        </td>
        <td>
            <div class="form-group">
                <input type="text" class="col-sm-1 form-control" name="CreditAmount" placeholder="Credit Amount">
          </div>
        </td>

    </tr>



</table>

Answer 1

我也遇到了类似的问题。从下拉列表中获取值后，您仍然需要以某种方式将它们放入表单中并提交。 看看这个我设法像这样解决它。 Populating the third menu based on previous dropdown values

还有提交按钮吗？无法看到您如何在表单中提交。还缺少结束表单标签