三个选择列表由数据库驱动

我试图创建一个有三个选择下拉列表的表单。用户从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>