2019.03.25 Ajax三级联动
所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果
如选择市之后,会给出相应的区,然后到相应的县这就是联动
配置视图
from django.core import serializers
def showMenuInfo(request):
pid = request.GET.get('pid',-1)
pid = int(pid)
areaList = Area.objects.filter(parentid=pid)
jAreaList = serializers.serialize('json',areaList)
return JsonResponse({'areaList':jAreaList})
配置模板页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
showProvince();
});
function showProvince(){
showArea('province',0,showCity);
}
function showCity(){
showArea('city',$('#province').val(),showTown);
}
function showTown(){
showArea('town',$('#city').val());
}
function showArea(selectId,pid,nextLoad){
$('#'+selectId).empty();
$.get('/stu/showMenu/',{'pid':pid},function(result){
//将JSON字符串转成JSON对象
areaList = JSON.parse(result.areaList);
for(var i=0;i<areaList.length;i++){
var area = areaList[i];
$('#'+selectId).append("<option value='"+area.pk+"'>"+area.fields.areaname+"</option>")
}
if(nextLoad!=null){
nextLoad();
}
})
}
</script>
</head>
<body>
<select id="province" onchange="showCity();"></select>
<select id="city" onchange="showTown();"></select>
<select id="town"></select>
</body>
</html>
2019.03.25 Ajax三级联动的更多相关文章
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- [2019.03.25]Linux中的查找
TMUX天下第一 全世界所有用CLI Linux的人都应该用TMUX,我爱它! ======================== 以下是正文 ======================== Linu ...
- 使用 AJAX + 三级联动 实现分类出全国各地的省,市,区
使用AJAX + 三级联动 实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...
- AJAX 三级联动
新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- 0509 关于Ajax + 三级联动示例
关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...
- [Ajax三级联动 无刷新]
三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...
- ajax 三级联动商品分类(转载)
转载 自 jines http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...
- 2019.03.24 Ajax
也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包 可以去网上搜腾讯网静态资源库 然后引入包 Ajax还是异步处理 处理堵塞问题 import time 就可以了 ...
随机推荐
- PHP计算两个经纬度地点之间的距离
/** * 求两个已知经纬度之间的距离,单位为米 * * @param lng1 $ ,lng2 经度 * @param lat1 $ ,lat2 纬度 * @return float 距 ...
- window.history.go(-1)返回且刷新页面 点击返回上一层
windows窗口对象(历史)history.go(),history.back(),history.forward(). 因为windows对象引用不是必须的.所以windows.history.g ...
- bootstrapValidator多字段联合验证(如开始日期和结束日期中,开始日期不可晚于结束日期)
接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...
- Arrays 类的一些常见用法
package cn.ljs; import java.util.Arrays; public class ArrayDemo { public static void main(String [] ...
- Vitrual Box设置linux网络连接到外网
Vitrual Box设置linux网络连接到外网 在虚拟机上安装好linux系统之后,经常会碰到ping不通www.baidu.com的情况,此时的情况多半是网络配置上的错误,linux在网络配置有 ...
- sklearn的K折交叉验证函数KFold使用
K折交叉验证时使用: KFold(n_split, shuffle, random_state) 参数:n_split:要划分的折数 shuffle: 每次都进行shuffle,测试集中折数的总和就是 ...
- COMSOL
COMSOL_百度百科 https://baike.baidu.com/item/COMSOL/10943148?fr=aladdin 显著特点 ■ 求解多场问题 = 求解方程组,用户只需选择或者自定 ...
- 双栈算术表达式求值算法 栈(Stack) - Java实现
https://mp.weixin.qq.com/s/dg8mgd6CIQ7Tui1_fQwSBA https://github.com/toywei/DataStructure/tree/maste ...
- ionic cordova screenshot 使用和操作
如何调用cordova 中的screenshot插件进行截图 首先添加 ionic cordova plugin add com.darktalker.cordova.screenshot npm i ...
- Instruments之Leaks学习
前言: 本篇文章,在于学习,我把别人的一些感觉好的文章汇总成了一篇,亲自实现了一下,留用于今后学习资料. 文章脉络:文章脉络: 一.内存优化 简介:Objective_C 有3种内存管理方法, 它们分 ...