html表单select下拉选项通过php从mysql动态获取的两种方法

没烧

已于 2022-07-12 12:44:37 修改

阅读量1.8k

点赞数 1

文章标签： html php mysql

于 2022-07-07 17:12:38 首次发布

本文链接：https://blog.csdn.net/qq_29705759/article/details/125662892

版权

实现功能：mysql表新增行后，会成为html页面下拉菜单的新选项

mysql数据库

方法一思路：

from表单中的select控件用div替代

php连接mysql，输出结果到div

方法一完整代码

test.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <!--这里只是用button触发事件，可以写在其它事件里，比如onload-->
    <button onclick="ssincu()">点击显示下拉菜单</button>

    <form>
        <div id="ccc"></div>
    </form>
</body>
<script>
	function ssincu(){
        if (window.XMLHttpRequest) {
			// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp = new XMLHttpRequest();
		}
		else {
			// IE6, IE5 浏览器执行代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
        xmlhttp.onreadystatechange = function () {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("ccc").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET", "test.php" ,true);
		xmlhttp.send();	
    }
</script>
</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;
}

//输出下拉菜单
echo '<select name="incu">';

//循环输出下拉菜单选项
foreach($arr as $incuarr){
    echo '<option>';
    echo '' . $incuarr['cs'] . '';
    echo '</option>'; 
}
echo '</select>';

mysqli_free_result($result);
mysqli_close($con);
?>

方法二完整代码：

test.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <form>
        <select id="incu"></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 () {
            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 * FROM tb_test";
 
$result = mysqli_query($con,$sql);
 //把数据集合转化为二维数组
$arr = [];
while ($row = mysqli_fetch_assoc($result)){
    $arr[] = $row;
}
//输出选项
 foreach ($arr as $val){ 
		echo "<option  value='" .$val['id']. "'>".$val['cs']."</option>";
 }
mysqli_close($con);
?>