2種形式（選擇）-1取決於2

Question

我想在html + php創建表單。 我的數據庫中有2個表。

1. 類別： id_category，類別
2. 乳制品： id_dairy，id_category，product_name

現在是問題。 如何使用2個select下拉列表創建1個表單。 沒有AJAX，是否可以在PHP中完成？

我的意思是-我要選擇“類別”，然后選擇“無刷新的產品”頁面。

碼：

<form role="form" action="kalorie.php" method="post">
      <div class="form-group">
        <label for="kategoria">Kategoria:</label>
        <select class="form-control" name="kategoria">
          <option>Wybierz kategorie</option>
            <?php
              $sql_1 = "SELECT * FROM produkty";
              $result_1 = mysqli_query($conn, $sql_1);

              while($row_1 = mysqli_fetch_assoc($result_1)) {
                echo '<option>'.$row_1["produkt"].'</option>';
              }

              $kat = $_POST['kategoria'];
            ?>
        </select>
        <select class="form-control" name="produkt">
          <option>Wybierz produkt</option>
            <?php
              $sql_2 = "SELECT * FROM $kat";
              $result_2 = mysqli_query($conn, $sql_2);

              while($row_2 = mysqli_fetch_assoc($result_2)) {
                echo '<option>'.$row_2["produkty"].'</option>';
              }
            ?>
        </select>
      </div>
      <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button>
    </form>

Answer 1

Ajax是對此的最佳解決方案。 但是，如果您需要替代方法，則可以使用“ iframe”並在該框架中提交ypur表單。

Answer 2

非Ajax解決方案：

將您的產品子類別加載到以類別ID為鍵的JavaScript對象中。 在類別選擇列表中更改類別后，換出產品列表中的選項。

<script>
var produkts = {
<?php
$sql_2 = "SELECT * FROM $kat";
$result_2 = mysqli_query($conn, $sql_2);

$id_category = 0;
list($delim1, $delim2) = array('', '');
while($row_2 = mysqli_fetch_assoc($result_2)) {
    $delim2 = '"';
    $row_2 = $row['value'];
    if ( $id_category != $row_2['id_category'] ) {
        $id_category = $row_2['id_category'];
        echo $delim1 . $id_category . ': "';
        $delim1 = '", ';
    }
    echo '<option>' . $row_2['produkty'] . '</option>';
}
echo $delim2;

?>
};
// example: {1: "<option>cheese</option><option>butter</option>", 2: "<option>ice cream</option>"}
</script>

<form role="form" action="kalorie.php" method="post">
  <div class="form-group">
    <label for="kategoria">Kategoria:</label>
    <select class="form-control" name="kategoria">
      <option>Wybierz kategorie</option>
        <option value="1">Me</option>
        <option value="2">You</option>
        <?php
          $sql_1 = "SELECT * FROM produkty";
          $result_1 = mysqli_query($conn, $sql_1);

          while($row_1 = mysqli_fetch_assoc($result_1)) {
            echo '<option>'.$row_1["produkt"].'</option>';
          }

          $kat = $_POST['kategoria'];
        ?>
    </select>
    <select class="form-control" name="produkt">
      <option>Wybierz produkt</option>
    </select>
  </div>
  <button type="submit" class="btn btn-default" name="oblicz">Wyślij</button>
</form>

<script>

document.querySelector('select[name=kategoria]').addEventListener('change', function (evt) {
    var kat = evt.target;
    var kat_sel = kat.options[kat.selectedIndex].value
    document.querySelector('select[name=produkt]').innerHTML = produkts[kat_sel];
})

</script>

模擬了JSFiddle演示。