php html写下拉选择框,javascript-根据第一个下拉列表选择填充HTML / PHP下拉列表

我有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：

Item Name

Item Description

Item Description

Item Category

-- Select Category --

$sql = mysql_query("SELECT category_name FROM t_menu_category");

while ($row = mysql_fetch_array($sql)){

?>

// close while loop

}

?>

任何帮助将不胜感激:)

解决方法:

您可以使用请求创建一个PHP文件,然后使用AJAX调用它.

getSubCategory.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以在选择类别时捕获并询问服务器相应的子类别：

$(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($("").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');

}

});

});

还可以在第一个选项上添加一个值：

-- Select Category --

标签：html,javascript,php,jquery,mysql

来源： https://codeday.me/bug/20191013/1908370.html