簡單實現(xiàn)ajax三級聯(lián)動效果
更新時間:2017年10月30日 10:30:58 作者:迪恩杰
這篇文章主要教大家簡單實現(xiàn)ajax三級聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了ajax三級聯(lián)動效果展示的具體代碼,供大家參考,具體內(nèi)容如下
主頁面代碼
<!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}, //發(fā)送的數(shù)據(jù) dataType: "json", //返回值的類型 text為string型 type: 'post', //發(fā)送請求的方法(get) url: 'sheng_l.php',//發(fā)送請求的地址 success: function (data) {//發(fā)送成功時的回調(diào)函數(shù) // 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);
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Ajax請求過程中下載文件在FireFox(火狐)瀏覽器下的兼容問題
最近做了個項目,其中有項目需求是這樣的,點擊一個文件鏈接下載該文件,同時向后臺發(fā)送請求,在開發(fā)過程中問題百出,小編把問題總結(jié)分享在腳本之家平臺,供大家參考2016-01-01js與jQuery實現(xiàn)的兼容多瀏覽器Ajax請求實例
這篇文章主要介紹了js與jQuery實現(xiàn)的兼容多瀏覽器Ajax請求,以實例形式分別講述了采用純js與jQuery實現(xiàn)的兼容多瀏覽器Ajax請求的方法,并對Ajax中出現(xiàn)的亂碼問題進行了一定的分析,需要的朋友可以參考下2014-11-11ajax動態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺的方法
今天小編就為大家分享一篇ajax動態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08asp.net 全部選中與取消操作,選中后的刪除(ajax)實現(xiàn)無刷新效果
現(xiàn)在我們在編程的時刻總是要利用一些最新的技術(shù)去解決問題。。。。下面是我用ajax與jequery結(jié)合在一起使用的一個實例。希能給一起學(xué)習(xí)的朋友們帶來幫助。2009-06-06Ajax bootstrap美化網(wǎng)頁并實現(xiàn)頁面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動態(tài)CSS語言Less寫成。下面通過本文給大家介紹Ajax bootstrap美化網(wǎng)頁并實現(xiàn)頁面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03