2015-04-02 46 views
0

我想要创建表格html + php。我的数据库中有2个表格。2表格(select) - 1依赖于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> 
+1

如果你不想刷新你需要AJAX.It做页面的无刷新页面可能以独特的方式从服务器发送/获取数据。 – abaracedo 2015-04-02 16:46:50

+0

您至少需要Javascript/jQuery才能完成此操作。 – CodeGodie 2015-04-02 16:50:02

+0

+1以上已经说过。没有ajax的唯一方法是使用onchange或onselect事件,但会刷新页面并预先填充下一个选择列表。 – 2015-04-02 16:53:25

回答

0

Ajax是这个最好的解决方案。 但是,如果你想要一个替代方案,你可以使用“iframe”并在该框架中提交ypur形式。

0

非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> 

Mocked up JSFiddle demo.