没烧 2022-07-07 13:02 采纳率: 100%
浏览 237
已结题

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

img

希望实现的功能

原本只有三个下拉选项，在mysql表tb_test中添加一行后能显示在下拉列表里

img

img

  • 写回答

6条回答 默认 最新

  • Saiyueze 2022-07-08 16:41
    关注

    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>
    1. 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 获取。有问题可以消息

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 7月12日
  • 已采纳回答 7月12日
  • 修改了问题 7月8日
  • 修改了问题 7月7日
  • 展开全部

悬赏问题

  • ¥15 CCF-CSP 2023 第三题 解压缩(50％)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在，全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解，已知电阻电压和三级关放大倍数