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" onchange="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" onchange="getModulePage()"> <option value="c">--请选择--</option></select><select id="modulePage"> <option value="c">--请选择--</option></select></body>
时间： 2024-10-01 21:38:45