我有 1 个用于类别（食品、饮料等）的下拉菜单
在我的 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>
您可以使用该请求创建一个 PHP 文件并使用 AJAX 调用它。
获取子类别.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
