php mysql jquery ajax 查询数据库三级联动

最新推荐文章于 2021-03-25 19:27:08 发布

weixin_30598225

最新推荐文章于 2021-03-25 19:27:08 发布

阅读量97

点赞数

文章标签：数据库 php javascript ViewUI

原文链接：http://www.cnblogs.com/meroselove/p/7392532.html

版权

1、php 页面打开直接展示第一个select option中的数据

2、当第一个下拉列表选中的内容发生改变的时候，查询数据库填充第二个下拉列表

3、当第二个下拉列表选中的内容发生改变时，查询数据库填充第三个下拉列表

注意点：

1、查询出来的数据，如果绑定到select上

2、select cochange事件

3、ajax 请求，提交到某个php 页面，参数是下拉列表选中的值，需要知道如何获取，查询数据库有结果，如果将返回的json格式的数据进行解析

代码：

表

CREATE TABLE `acl_action` (
`action_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',
`parent_id` INT(10) UNSIGNED DEFAULT NULL,
`action_name` VARCHAR(35) DEFAULT NULL,
PRIMARY KEY (`action_id`)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8

connect.php 页面

header("Content-Type:text/html;charset=utf-8");

$mysqli = new mysqli('localhost', 'root', '', 'c');
if ($mysqli->errno) {
 die('Connect Error:' . $mysqli->error);
} else {
 $mysqli->set_charset('UTF8');
}


ajax 提交页面
demo04.php

require_once "connect.php";
require_once "function.php";

if(isset($_GET["module"])){
 $module = $_GET["module"];
echo getModuleMessage($mysqli,$module);
}

if(isset($_GET["moduleChild"])){
 $moduleChild=$_GET["moduleChild"];
echo getModuleChildMessage($mysqli,$moduleChild);
}

function.php 页面

require_once "connect.php";

function getModuleMessage($mysqli,$module){
 $result = $mysqli->query("SELECT action_id,action_name FROM acl_action where parent_id=" . $module);
if ($result && $result->num_rows > 0) {
 while ($row = $result->fetch_assoc()) {
 $select[] = array("action_id" => $row['action_id'], "action_name" => $row['action_name']);
}
 return json_encode($select);
}
 return 0;
}

function getModuleChildMessage($mysqli,$moduleChild){
 $result = $mysqli->query("SELECT action_id,action_name FROM acl_action where parent_id=" . $moduleChild);
if ($result && $result->num_rows > 0) {
 while ($row = $result->fetch_assoc()) {
 $select[] = array("action_id" => $row['action_id'], "action_name" => $row['action_name']);
}
 return json_encode($select);
}
}

demo04.js 页面

function getModuleChild() {
    $.getJSON("demo0402.php", {module: $("#module").val()}, function (json) {
 if(json==0){
 clearChild();
}
 var moduleChild = $("#moduleChild");
$("option", moduleChild).not(":first").remove();
$.each(json, function (index, array) {
 var option = "<option value='" + array['action_id'] + "'>" + array['action_name'] + "</option>";
moduleChild.append(option);
});
clearChild();
});
}

function clearChild(){
 var modulePage = $("#modulePage");
$("option", modulePage).not(":first").remove();
}

function getModulePage() {
 $.getJSON("demo0402.php", {moduleChild: $("#moduleChild").val()}, function (json) {
 var modulePage = $("#modulePage");
$.each(json, function (index, array) {
 var option = "<option value='" + array['action_id'] + "'>" + array['action_name'] + "</option>";
modulePage.append(option);
});
});
}

php 文件，里面嵌套html代码

<script src="jquery-2.1.4.js"></script>
<script src="demo04.js"></script>

<body>
<select id="module" οnchange="getModuleChild()">
 <option value="c">--请选择--</option>
 <?php
 $result = $mysqli->query("SELECT action_id,action_name FROM acl_action where parent_id=0");
if ($result && $result->num_rows > 0) {
 while ($row = $result->fetch_assoc()) { ?>
 <option value="<?php echo $row['action_id'] ?>"><?php echo $row['action_name'] ?></option>
 <?php
 }
 }
 ?>
</select>
<select id="moduleChild" οnchange="getModulePage()">
 <option value="c">--请选择--</option>
</select>
<select id="modulePage">
 <option value="c">--请选择--</option>
</select>
</body>

转载于:https://www.cnblogs.com/meroselove/p/7392532.html

weixin_30598225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php mysql jquery ajax 查询数据库三级联动

1、php 页面打开直接展示第一个select option中的数据2、当第一个下拉列表选中的内容发生改变的时候，查询数据库填充第二个下拉列表3、当第二个下拉列表选中的内容发生改变时，查询数据库填充第三个下拉列表注意点：1、查询出来的数据，如果绑定到select上2、select cochange事件3、ajax 请求，提交到某个php 页面，参数是下拉列表选中的值，...
复制链接

扫一扫