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

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 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！