mysql 城市二级联动_如何在php中使用mysql实现一个二级联动菜单效果

如何在php中使用mysql实现一个二级联动菜单效果

发布时间:2021-02-11 18:17:52

来源:亿速云

阅读:57

作者:Leah

今天就跟大家聊聊有关如何在php中使用mysql实现一个二级联动菜单效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

具体如下:

生成学院专业级联下拉菜单测试 

 //

/***********************************************

** 功 能: php+mysql+javascript实现学院专业二级级联下拉框

** 数据库:数据库名( dms)、数据表( colleges、 majors)

** 表 colleges中字段: college_id( id编号)、 name(学院名)

** 表 majors中的字段: major_id( id编号)、 college_id(学院 ID)、 name(学院名)

** version 1.0

** 作 者: wu yaowen

***********************************************/

//****************** 连接选择数据库 ***************

$link = mysql_connect("localhost", "root", "123456")

or die("Could not connect : " . mysql_error());

mysql_select_db("dms") or die("Could not select database");

//******************提取学院信息 ******************

$queryCol = "select * from colleges order by college_id ";

mysql_query("SET NAMES 'gb2312'");

$result1 = mysql_query($queryCol) or die("Query failed : " . mysql_error());

$colleges = array();

while( $row1 = mysql_fetch_array($result1) )

{

$colleges[] = $row1;

}

//print_r ($forum_data);

mysql_free_result($result1);

//**************获取专业信息 **************

$queryMaj = "select * from majors order by college_id desc";

mysql_query("SET NAMES 'gb2312'");

if( !($result2 = mysql_query($queryMaj)) )

{

die('Could not query t_city list');

}

$majors = array();

while( $row2 = mysql_fetch_array($result2) )

{

$majors[] = $row2;

}

mysql_free_result($result2);

?>

var majorCount; // 存储专业记录条数

// form_majors[] 储存专业 major数据,如 {(1,1,电子商务 ),(4,1,计算机科学 ),(3,2,古典文学 )}

form_majors = new Array();

$num2 = count($majors); // $num2 获取专业表中记录的个数

?>

majorCount = <?php  echo $num2;?>;

for($j=0;$j

{

?>

form_majors[<?echo  $j;?>] = new Array("<?echo  $majors[$j]['major_id'];?>","<?echo  $majors[$j]['college_id'];?>","<?echo  $majors[$j]['name'];?>");

}

?>

function changeCollege(college_id)

{

document.stu_add_form.major.length = 0;

var id=id;

var j;

document.stu_add_form.major.options[0] = new Option('==选择专业 ==',''); // label的 value为空 ' '

for (j=0;j 

{

if (form_majors[j][1] == college_id) // if college_id等于选择的学院的 id

{

document.stu_add_form.major.options[document.stu_add_form.major.length] = new Option(form_majors[j][2], form_majors[j][0]);

}

}

}

选择: 

==请选择学院 ==

$num = count($colleges);

for($i=0;$i

{

?>

"><?echo  $colleges[$i]['name'];?>

}

?>

==选择专业 ==

sql语句:--

-- 表的结构 `colleges`

--

CREATE TABLE IF NOT EXISTS `colleges` (

`college_id` int(8) NOT NULL auto_increment COMMENT '学院编号自动增加',

`name` varchar(40) NOT NULL COMMENT '学院名称',

PRIMARY KEY (`college_id`),

UNIQUE KEY `name` (`name`)

) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=7 ;

--

-- 导出表中的数据 `colleges`

--

INSERT INTO `colleges` (`college_id`, `name`) VALUES

(4, '化学与化工学院'),

(1, '计算机与信息科学学院'),

(6, '美术学院'),

(2, '文学院'),

(5, '音乐学院'),

(3, '政治与公共管理学院');

--

-- 表的结构 `majors`

--

CREATE TABLE IF NOT EXISTS `majors` (

`major_id` int(8) NOT NULL auto_increment COMMENT '专业号,自动增加',

`name` varchar(40) NOT NULL COMMENT '专业名',

`college_id` int(8) default NULL COMMENT '所在学院',

`counsellor_id` int(10) default NULL COMMENT '辅导员',

PRIMARY KEY (`major_id`),

UNIQUE KEY `college_id` (`college_id`,`counsellor_id`)

) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=8 ;

--

-- 导出表中的数据 `majors`

--

INSERT INTO `majors` (`major_id`, `name`, `college_id`, `counsellor_id`) VALUES

(1, '电子商务', 1, 1),

(2, '音乐视唱', 5, 1),

(3, '古典文学', 2, 1),

(4, '计算机科学', 1, NULL),

(5, '自动化', 1, NULL),

(6, '现代文学', 2, NULL),

(7, '新闻写作', 2, NULL);

看完上述内容,你们对如何在php中使用mysql实现一个二级联动菜单效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Java Web 项目,实现了省份城市二级联动功能。该项目使用MySQL 数据库,通过 AJAX 请求获取 JSON 格式的省份和城市数据,然后通过 JavaScript 实现了省份和城市二级联动。 1. 数据库部分: 创建两个表,一个用于存储省份数据,一个用于存储城市数据。在省份表,包含省份的 id、名称和编码;在城市,包含城市的 id、名称、编码和所属省份的 id。 省份表 SQL 语句: ``` CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 城市表 SQL 语句: ``` CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, `province_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `idx_province_id` (`province_id`), CONSTRAINT `fk_province_id` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 2. 后端部分: 创建一个 Java Servlet,用于处理 ajax 请求,并从数据库获取省份和城市的数据。在 doGet() 方法,根据请求参数获取对应的省份和城市数据,并将数据以 JSON 格式返回给前端。 ProvinceServlet.java 代码: ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONArray; import org.json.JSONObject; public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String DB_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String DB_USER = "root"; private static final String DB_PASSWORD = "root"; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); String type = request.getParameter("type"); if ("province".equals(type)) { getProvinces(response); } else if ("city".equals(type)) { String provinceCode = request.getParameter("provinceCode"); getCities(response, provinceCode); } } private void getProvinces(HttpServletResponse response) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT * FROM province"; stmt = conn.prepareStatement(sql); rs = stmt.executeQuery(); JSONArray provinces = new JSONArray(); while (rs.next()) { JSONObject province = new JSONObject(); province.put("id", rs.getInt("id")); province.put("name", rs.getString("name")); province.put("code", rs.getString("code")); provinces.put(province); } PrintWriter out = response.getWriter(); out.print(provinces); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } private void getCities(HttpServletResponse response, String provinceCode) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT c.id, c.name, c.code FROM city c JOIN province p ON c.province_id = p.id WHERE p.code = ?"; stmt = conn.prepareStatement(sql); stmt.setString(1, provinceCode); rs = stmt.executeQuery(); JSONArray cities = new JSONArray(); while (rs.next()) { JSONObject city = new JSONObject(); city.put("id", rs.getInt("id")); city.put("name", rs.getString("name")); city.put("code", rs.getString("code")); cities.put(city); } PrintWriter out = response.getWriter(); out.print(cities); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } } ``` 3. 前端部分: 在 HTML 页面添加两个 select 标签,一个用于选择省份,一个用于选择城市。给这两个 select 标签分别添加 id,例如:province 和 city。 然后,在 JavaScript ,通过 ajax 发送请求,获取省份和城市的数据。在省份 select 标签添加 option 标签,显示所有省份的名称。当用户选择某个省份时,再次发送 ajax 请求,获取该省份下的所有城市,并在城市 select 标签添加 option 标签,显示所有城市的名称。 index.html 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省份城市二级联动</title> </head> <body> <select id="province"></select> <select id="city"></select> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { // 获取所有省份 $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "province" }, success: function(data) { // 在省份 select 标签添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#province").append(option); } // 触发省份 select 标签的 change 事件 $("#province").trigger("change"); } }); // 当省份 select 标签的值发生变化时,获取该省份下的所有城市 $("#province").on("change", function() { var provinceCode = $(this).val(); $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "city", provinceCode: provinceCode }, success: function(data) { // 清空城市 select 标签的 option 标签 $("#city").empty(); // 在城市 select 标签添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#city").append(option); } } }); }); }); </script> </body> </html> ``` 4. 部署和运行: 将上述代码保存在一个 Java Web 项目,将 MySQL 驱动程序添加到项目的 classpath ,然后部署到 Tomcat 服务器运行。在浏览器访问该项目的 index.html 页面,即可实现省份城市二级联动功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值