html表单下拉选项如何动态从mysql中获取
需求
test.html页面有一个form表单，表单上有一个select下拉菜单，下拉选项需要从test.php查询mysql某一列获取。
//由于会给mysql这一列新增数据，并且需要新增的数据加入下拉菜单选项
test.html页面代码
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<select name="incu">
<!--这一块不会写,如何引用php查询的mysql结果作为下拉选项-->
</select>
</form>
</body>
</html>
test.php页面代码
<?php
//连接数据库
$con = mysqli_connect('localhost','root','123');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
// 选择数据库
mysqli_select_db($con,"opss");
// 设置编码，防止中文乱码
mysqli_set_charset($con, "utf8");
//查询语句
$sql="SELECT cs FROM tb_test";
$result = mysqli_query($con,$sql);
//这里不会把结果转为数组，以及如何传给test.html
mysqli_close($con);
?>
mysql数据库tb_test
希望实现的功能
原本只有三个下拉选项，在mysql表tb_test中添加一行后能显示在下拉列表里
1、修改
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<select name="incu">
<!--这一块不会写,如何引用php查询的mysql结果作为下拉选项-->
</select>
</form>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 注意根据实际情况调整 test.php的路径
var optHtml=$.ajax({url:"/test.php",async:false});
$("#incu").html(optHtml.responseText);
});
</script>
</body>
</html>
- test.php 代码修改如下
<?php
//连接数据库
$con = mysqli_connect('localhost','root','123');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
// 选择数据库
mysqli_select_db($con,"opss");
// 设置编码，防止中文乱码
mysqli_set_charset($con, "utf8");
//查询语句
$sql="SELECT cs FROM tb_test";
$result = mysqli_query($con,$sql);
//把数据集合转化为二维数组
$arr = [];
while ($row = mysqli_fetch_assoc($result)){
$arr[] = $row;
}
//这里不会把结果转为数组，以及如何传给test.html
foreach ($arr as $val){
echo "<option value='“.” $val['id']."'>".$val['cs']."</option>";
}
mysqli_close($con);
?>
通过ajax 获取。有问题可以消息
<?php
//连接数据库
$con = mysqli_connect('localhost','root','123');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
// 选择数据库
mysqli_select_db($con,"opss");
// 设置编码，防止中文乱码
mysqli_set_charset($con, "utf8");
//查询语句
$sql="SELECT cs FROM tb_test";
$result = mysqli_query($con,$sql);
//把数据集合转化为二维数组
$arr = [];
while ($row = mysqli_fetch_assoc($result)){
$arr[] = $row;
}
// print_r($arr);
mysqli_close($con);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<select name="incu"></select>
<!--这一块不会写,如何引用php查询的mysql结果作为下拉选项-->
<?php
foreach ($arr as $val){ ?>
<!-- 在这里循环渲染列表，所有从数据库中获取到的数据都用<?php ?>标签包裹，并用echo打印出来 -->
<option value=" <?php echo $val['id']?>"><?php echo $val['cs']?></option>
<?php } ?>
</select>
</form>
</body>
</html>
使用这个链接，是我自己用的，可以动态获取到数据库中的信息，并且更新到下拉框中
https://download.csdn.net/download/weixin_45647036/85947397
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<select name="incu"></select>
<script src="b.php"></script>
</select>
</form>
</body>
</html>
b.php代码为下面：
//数据库连接就不写了，这个您应该知道
<?php
foreach ($arr as $val){
echo"<option value='“.” $val['id']."'>".$val['cs']."</option>";
}
?>
这个是最简单获取PHP输出
或者使用Ajax，获取PHP文件生成的JSON数据，然后解析获取select id或者class，再赋值在标签里面
已经找到的解决方法https://blog.csdn.net/qq_29705759/article/details/125662892
查到数据，循环渲染 option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不许 缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<title>Document</title>
</head>
<body>
<select name="incu" id="incu">
</select>
</body>
<script>
let incu=document.getElementById("incu");
let arr=[
{
id:1,
value:"444"
},
{
id:2,
value:"888"
}
];
let str="";
arr.map((item)=>{
str+=`<option value="${item.id}">${item.value}</option>`;
});
incu.innerHTML=str;
</script>
</html>