二级菜单联动PHP+JS+JSON+MYSQL,自动获取数据库内容分类id、title

174 阅读1分钟

前端页面:

qianduan.php

<!--这里的js个人可下载到本地调用亦可--><script src="https://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script><label>大类:</label> <select name="bigname" id="bigname"> <?$sql = "select * from xiangce_fenlei where bigclass='0' ";$result = mysql_query($sql, $conn);if (mysql_num_rows($result) > 0) {// 输出小程序数组 while($row = mysql_fetch_array($result)){?> <option value="<?=$row['id']?>"><?=$row['title']?></option> <? }} ?></select> <label>小类:</label> <select name="smallname" id="smallname"> <option value="1">dd</option> ​</select> <script>$(document).ready(function(){ getSelectVal(); $("#bigname").change(function(){ getSelectVal(); }); }); function getSelectVal(){ $.getJSON("/sql.php?bigname="+$("#bigname").val(),function(json){ var smallname = $("#smallname"); //console.log('f'+$("#bigname").val()); $("option",smallname).remove(); //清空原有的选项 $.each(json,function(index,array){ var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; smallname.append(option); }); }); } </script>

sql.php -后台数据库输入 二级分类的数据json,自行做安全措施

//这里自行应用数据库连接字符串或修改下列代码$mysql_server_name='localhost'; //改成自己的mysql数据库服务器$mysql_username='aaaa'; //改成自己的mysql数据库用户名$mysql_password='bbbb'; //改成自己的mysql数据库密码 $mysql_database='cccc'; //改成自己的mysql数据库名$conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ; //连接数据库mysql_query("set names 'utf8'"); //数据库输出编码 应该与你的数据库编码保持一致mysql_select_db($mysql_database); //打开数据库session_start();//查询代码$bigid = $_GET["bigname"]; if(isset($bigid)){ $q=mysql_query("select * from xiangce_fenlei where bigclass = $bigid"); while($row=mysql_fetch_array($q)){ $select[] = array("id"=>$row[id],"title"=>$row[title]); } echo json_encode($select); }