填充HTML/PHP下拉基於第一個下拉選擇

我有1下拉它是用於類別（食品，飲料等）填充HTML/PHP下拉基於第一個下拉選擇

在我的MySQL表（t_menu_category）我有：

+----+---------------+-------------------+----------------------+ 
| ID | category_name | sub_category_name | category_description | 
+----+---------------+-------------------+----------------------+ 
| 1 | Food   | Curries   | Spicy Curries  | 
| 2 | Food   | Meat    | Lamb, Pork, Chicken | 
| 3 | Drinks  | Alcohol   | Fine Tasting Lager | 
| 4 | Desserts  | Cakes    | Chocolate Cake  | 
+----+---------------+-------------------+----------------------+

我有第一個下拉菜單顯示「category_name」的值，但我想要的是當我選擇食物時，我希望第二個下拉框更新，並只顯示「sub_category_name」的值，其中第一個選擇例如。「食物」等於數據庫中的「食物」。

因此，如果我在第一個下拉框中選擇了「食物」，第二個下拉框將僅顯示「咖喱」&「肉」。

HTML：

<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> 

    <p> 
     <label for="item_name">Item Name</label> 
     <input id="item_name" name="item_name" required="required" type="text" placeholder="Item Name" /> 
    </p> 
    <p> 
     <label for="item_description">Item Description</label> 
     <textarea rows="3" cols="100%" required="required" name="item_description">Item Description</textarea> 
    </p> 
    <p> 
     <label for="item_category">Item Category</label> 
     <select id="item_category" name="item_category" required="required"> 
      <option selected="selected">-- Select Category --</option> 
      <?php 
      $sql = mysql_query("SELECT category_name FROM t_menu_category"); 
      while ($row = mysql_fetch_array($sql)){ 
      ?> 

      <option value="<?php echo $row['category_name']; ?>"><?php echo $row['category_name']; ?></option> 

      <?php 
      // close while loop 
      } 
      ?> 
     </select> 
    </p> 

    <p class="center"><input class="submit" type="submit" name="submit" value="Add Menu Item"/></p> 
</form>

任何幫助，將不勝感激:)

來源

2014-03-30 Danny

一種方法可能是將您的PHP放入其他文件（Web服務）中，並在使用AJAX時調用它ction在第一次選擇中完成。 – MamaWalter

您可以添加一些更詳細的信息，瞭解您需要的解決方案類型？你想在瀏覽器中使用JavaScript嗎？或者你想讓用戶提交表單，然後讓頁面重新加載第二個下拉列表，現在呈現？ – Mike

我在這裏回答了一個類似的問題：http://stackoverflow.com/questions/22728170/retrieve-data-into-ajax-dropdown-menu-using-php-mysql-jquery/22730571#22730571，它有代碼重新加載Dropbox取決於發送的值。實際上，正如@MamaWalter所說，您需要AJAX – Chococroc

，你可以創建一個請求的PHP文件，並用AJAX調用它。

getSubCategory.php

<?php 
$category = ""; 
if(isset($_GET['category'])){ 
    $category = $_GET['category']; 
} 

/* Connect to the database, I'm using PDO but you could use mysqli */ 
$dsn = 'mysql:dbname=my_database;host=127.0.0.1'; 
$user = 'my_user'; 
$password = 'my_pass'; 

try { 
    $dbh = new PDO($dsn, $user, $password); 
} catch (PDOException $e) { 
    echo 'Connection failed: ' . $e->getMessage(); 
} 

$sql = 'SELECT sub_category_name as subCategory FROM t_menu_category WHERE category_name = :category'; 
$stmt = $dbh->prepare($sql); 
$stmt->bindValue(':category', $category); 
$stmt->execute(); 

return json_encode($stmt->fetchAll());

，並添加一些jQuery的一個類別，選擇時要趕上和向服務器請求相應的子類：

<script> 
    $(document).ready(function() { 
     $('#item_category').on('change', function() { 

      //get selected value from category drop down 
      var category = $(this).val(); 

      //select subcategory drop down 
      var selectSubCat = $('#item_sub_category'); 

      if (category != -1) { 

       // ask server for sub-categories 
       $.getJSON("getSubCategory.php?category="+category) 
       .done(function(result) {  
        // append each sub-category to second drop down 
        $.each(result, function(item) { 
         selectSubCat.append($("<option />").val(item.subCategory).text(item.subCategory)); 
        }); 
        // enable sub-category drop down 
        selectSubCat.prop('disabled', false);     
       }); 

      } else {     
       // disable sub-category drop down 
       selectSubCat.prop('disabled', 'disabled'); 
      } 
     });  

    }); 
</script>

也是你的第一次添加一個值選項：

<option value="-1" selected="selected">-- Select Category --</option>

來源

2014-03-31 02:48:49 MamaWalter

填充HTML/PHP下拉基於第一個下拉選擇

回答

相關問題