根据第一次下拉选择填充HTML / PHP下拉菜单 [英] Populate HTML/PHP Dropdown Based on First Dropdown Selection
本文介绍了根据第一次下拉选择填充HTML / PHP下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的MYSQL表（t_menu_category）中我有：
+ ---- + --------------- + ---------- --------- + ---------------------- +
| ID | category_name | sub_category_name | category_description |
+ ---- + --------------- + ------------------- + ---- ------------------ +
| 1 |食物|咖喱|辣咖喱|
| 2 |食物|肉类|羊肉，猪肉，鸡肉
| 3 |饮料|酒精|精品酒
| 4 |甜点|蛋糕|巧克力蛋糕|
+ ---- + --------------- + ------------------- + ---- ------------------ +
我有得到第一个下拉菜单显示category_name的值，但我想要的是当我选择食物，我想第二个下拉框更新，只显示sub_category_name的值，其中第一个选择，例如。 食物等于数据库中的食物。
所以如果我在第一个下拉框中选择了食物，第二个下拉框将只显示Curries& ; 肉。
HTML：
< form method = postaction =<？php $ _SERVER ['PHP_SELF']？>>
< p>
< label for =item_name>项目名称< / label>
< input id =item_namename =item_namerequired =requiredtype =textplaceholder =Item Name/>
< / p>
< p>
< label for =item_description>项目描述< / label>
< / p>
< p>
< label for =item_category>项目类别< / label>
< select id =item_categoryname =item_categoryrequired =required>
< option selected =selected> - 选择类别 - < / 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']; ？>< /选项>
<？php
//关闭while循环
}
？>
< / select>
< / p>
< p class =center>< input class =submittype =submitname =submitvalue =Add Menu Item/>< / p> ;
< / form>
任何帮助都会得到高度评价：）
解决方案
您可以使用请求创建一个PHP文件，并使用AJAX调用它。
getSubCategory.php
<？php
$ category =;
if（isset（$ _ GET ['category']））{
$ category = $ _GET ['category'];
}
连接到数据库，我使用的是PDO，但可以使用mysqli * /
$ dsn ='mysql：dbname = my_database; host = 127.0。 0.1' ;
$ user ='my_user';
$ password ='my_pass';
尝试{
$ dbh =新的PDO（$ dsn，$ user，$ password）;
} catch（PDOException $ e）{
echo'连接失败：'。 $ 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（）;
返回json_encode（$ stmt-> fetchAll（））;
并添加一些jquery来捕获何时选择一个类别并向服务器请求相应的子类别：
< script> $（$＃
$（document）.ready（function（）{
$（'＃item_category'）on（'change'，function（）{
//获取选定值从类别下拉菜单
var category = $（this）.val（）;
//选择子类别下拉菜单
var selectSubCat = $（'＃item_sub_category'）;
if（category！= -1）{
//向服务器请求子类
$ .getJSON（getSubCategory.php？category =+ category ）
.done（function（result）{
//将每个子类别附加到第二个下拉列表
$ .each（result，function（item）{
selectSubCat.append （$（< option />\").val(item.subCategory).text(item.subCategory））;
}）;
//启用子类别下拉
selectSubCat.prop（'disabled'，false）;
}）;
} else {
//禁用子类别下拉菜单
selectSubCat.prop（'disabled'，'disabled'）;
}
}）;
}）;
< / script>
也会为您的第一个选项添加一个值：
< option value = - 1selected =selected> - 选择类别 - < / option>
I Have 1 Drop Down Which Is Used For Category (Food, Drink etc)
In my MYSQL Table (t_menu_category) I Have :
+----+---------------+-------------------+----------------------+
| 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 |
+----+---------------+-------------------+----------------------+
I have got the first dropdown showing the values of "category_name" but what i want is when i select food i want the second dropdown box to update and just show the values of "sub_category_name" where the first selection eg. "Food" equals "Food" in the database.
So if i selected "Food" in the first dropdown box, the second dropdown box will only show "Curries" & "Meat".
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>
Any Help Will Be Highly Appreciated :)
解决方案
you could create a PHP file with the request and call it with 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());
and add some jquery to catch when an category is selected and ask the server for the corresponding sub-category:
<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>
also add a value on your first option:
<option value="-1" selected="selected">-- Select Category --</option>
这篇关于根据第一次下拉选择填充HTML / PHP下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
