簡單實(shí)現(xiàn)ajax三級(jí)聯(lián)動(dòng)效果
本文實(shí)例為大家分享了ajax三級(jí)聯(lián)動(dòng)效果展示的具體代碼,供大家參考,具體內(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>請(qǐng)選擇</option>
</select>
<select id="shi">
<option >請(qǐng)選擇</option>
</select>
<select id="qu">
<option >請(qǐng)選擇</option>
</select>
</body>
</html>
<script>
$.ajax({
data: {parent_id: 0}, //發(fā)送的數(shù)據(jù)
dataType: "json", //返回值的類型 text為string型
type: 'post', //發(fā)送請(qǐng)求的方法(get)
url: 'sheng_l.php',//發(fā)送請(qǐng)求的地址
success: function (data) {//發(fā)送成功時(shí)的回調(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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
- ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
- ajax三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法
- ajax實(shí)現(xiàn)無刷新省市縣三級(jí)聯(lián)動(dòng)
- ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
- Ajax商品分類三級(jí)聯(lián)動(dòng)的簡單實(shí)現(xiàn)(案例)
- Ajax+php實(shí)現(xiàn)商品分類三級(jí)聯(lián)動(dòng)
- ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果
- AJAX實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果
相關(guān)文章
IE6中ajax aborted錯(cuò)誤請(qǐng)求中斷解決方法
給a標(biāo)簽綁定了一個(gè)click事件用來觸發(fā)ajax請(qǐng)求,在IE6中,請(qǐng)求時(shí)常會(huì)被中斷,在其他瀏覽器中都一切正常,具體解決方法如下,感興趣的朋友可以參考下2013-06-06
Ajax請(qǐng)求過程中下載文件在FireFox(火狐)瀏覽器下的兼容問題
最近做了個(gè)項(xiàng)目,其中有項(xiàng)目需求是這樣的,點(diǎn)擊一個(gè)文件鏈接下載該文件,同時(shí)向后臺(tái)發(fā)送請(qǐng)求,在開發(fā)過程中問題百出,小編把問題總結(jié)分享在腳本之家平臺(tái),供大家參考2016-01-01
js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求實(shí)例
這篇文章主要介紹了js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求,以實(shí)例形式分別講述了采用純js與jQuery實(shí)現(xiàn)的兼容多瀏覽器Ajax請(qǐng)求的方法,并對(duì)Ajax中出現(xiàn)的亂碼問題進(jìn)行了一定的分析,需要的朋友可以參考下2014-11-11
ajax動(dòng)態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺(tái)的方法
今天小編就為大家分享一篇ajax動(dòng)態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺(tái)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11
asp.net 全部選中與取消操作,選中后的刪除(ajax)實(shí)現(xiàn)無刷新效果
現(xiàn)在我們?cè)诰幊痰臅r(shí)刻總是要利用一些最新的技術(shù)去解決問題。。。。下面是我用ajax與jequery結(jié)合在一起使用的一個(gè)實(shí)例。希能給一起學(xué)習(xí)的朋友們帶來幫助。2009-06-06
Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語言Less寫成。下面通過本文給大家介紹Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03

