使用ajax實現菜單欄的三級聯動

來源：懂視網責編：小采時間：2020-11-27 19:57:32

使用ajax實現菜單欄的三級聯動

使用ajax實現菜單欄的三級聯動:這次給大家帶來使用ajax實現菜單欄的三級聯動，使用ajax實現菜單欄三級聯動的注意事項有哪些，下面就是實戰案例，一起來看一下。主頁面代碼<!DOCTYPE html> <html lang="en"> <head> <meta cha

推薦度：

點擊下載本文 文檔為doc格式

導讀使用ajax實現菜單欄的三級聯動:這次給大家帶來使用ajax實現菜單欄的三級聯動，使用ajax實現菜單欄三級聯動的注意事項有哪些，下面就是實戰案例，一起來看一下。主頁面代碼<!DOCTYPE html> <html lang="en"> <head> <meta cha

這次給大家帶來使用ajax實現菜單欄的三級聯動，使用ajax實現菜單欄三級聯動的注意事項有哪些，下面就是實戰案例，一起來看一下。

主頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../wenjian/jquery-2.2.3.min.js"></script>
</head>
<body>
<select id="sheng">
 <option>請選擇</option>
</select>
<select id="shi">
 <option >請選擇</option>
</select>
<select id="qu">
 <option >請選擇</option>
</select>
</body>
</html>
<script>
 $.ajax({
 data: {parent_id: 0}, //發送的數據
 dataType: "json", //返回值的類型 text為string型
 type: 'post', //發送請求的方法(get)
 url: 'sheng_l.php',//發送請求的地址
 success: function (data) {//發送成功時的回調函數
 // console.log(data);
 for (var i in data) {
 $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1] +"</option>")
 }
 }
 })
 $(document).ready(function () {
 $("#sheng").change(function () {
 $("#shi").get(0).options.length= 1;
// $("#qu").get(0).options.length= 1;
 var data = $("#sheng").find("option:selected").val();
 $.ajax({
 data:{parent_id:data},
 type:"post",
 dataType:"json",
 url:"sheng_l.php",
 success:function (data) {
 for(var i in data){
 $("#shi").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>")
 }
 }
 })
 })
 })
 $(document).ready(function () {
 $("#shi").change(function () {
 $("#qu").get(0).options.length= 1;
 var data = $("#shi").find("option:selected").val();
 $.ajax({
 data:{parent_id:data},
 type:"post",
 dataType:"json",
 url:"sheng_l.php",
 success:function (data) {
 for (var i in data){
 $("#qu").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>")
 }
 }
 })
 })
 })

處理頁面代碼

<?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/29
 * Time: 20:56
 */
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$sql = "select * from region WHERE father_id = {$_POST['parent_id']}";
$result = $db->Query($sql);
echo json_encode($result);

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

使用ajax實現菜單欄的三級聯動

推薦度：

點擊下載本文 文檔為doc格式

標簽：菜單菜單的 ajax

熱門焦點

使用ajax實現菜單欄的三級聯動

使用ajax實現菜單欄的三級聯動

使用ajax實現菜單欄的三級聯動

最新推薦

猜你喜歡

熱門推薦