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

你还有一个提交按钮吗？无法看到您在表单中的提交方式。还缺少结束表格标签

Answer 2

最后我明白了。这个脚本工作得很好。问题不是在脚本中而是在html中。顶部菜单隐藏了一行输出n我正在敲打我的头来获取空白页。

三个选择列表数据库驱动

2 个答案: