在我做的项目中有个选择省城市的选项，这两个字段的关系是一对多的关系
class Province(models.Model): # 省会
      name = models.CharField(max_length=30)

class City(models.Model): #城市
      name = models.CharField(max_length=30)
      province = models.ForeignKey(Province)

前台代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/site_media/css/imgareaselect-default.css" />
 <script type="text/javascript" src="/site_media/scripts/jquery.min.js"></script>
 <script type="text/javascript" src="/site_media/scripts/jquery.imgareaselect.pack.js"></script>

</head>
        <form action="/addInfo/" method="post" name="" class="hform">
          <fieldset>
                        <p><label><span style="color:red">*</span>选择分类</label>
                          <select name="province" id="province">
                          <option value="">请选择分类</option>
                          {% for province in provinces %}
                          <option value="{{ province.id }}">{{ province.name }}</option>
                          {% endfor %}
                          </select>
                          </p>
                           <p><label<span style="color:red">*</span>选择子类</label>
              <select name="city" id="city">
                          </select>
                          </p>
                          <p><label><span style="color:red">*</span>标题</label>
              <input type="text" name="title" id="title">
                          </p>
        
                           <p><input type="submit" name="submit" value="提交" class="button"></p>
                          </fieldset>
             
          </form>

{% block js %}
        <script lang="javascript">

$("#province").change(function (){
                if($("#province").val() != ""){

$.getJSON("/getcity/", { category: $("#province").val() },
                function(data){
                 $("#city").empty();
                 $("#city").append("<option value=\"\">请选择子类</option>");
                 if(data.length!=0){
                          $.each(data,function(i,n){
                          $("#city").append("<option value="+i+">"+n+"</option>");
                          });
                        }
                        
                         });

}else{
                         $("#city").empty();
                }

});

$("form").submit(function() {
         
      if ($("#province").val() == "") {
             alert("请选择分类");
                 $("#province").focus();
         return false;
      }
           if ($("#city").val() == "") {
                 alert("请选择子类");
                 $("#city").focus();
        return false;
      }
        
    });

后台：
def cityinfo(request):
   provinces = Province.objects.all()
   return render_to_response("cityform.html",locals())
def getcity(request):
                provinceId = int(request.GET.get('category'))
                province = Province.objects.get(id=provinceId)

citys = City.objects.filter(province=province)

data = {}

for city in citys:
                        data[city.id] = city.name

return HttpResponse(simplejson.dumps(data))
urls.py
    (r'^province/$', views.cityinfo),
    (r'^getcity/$',views.getcity),

django Forgienkey字段 在前台用js做处理的更多相关文章

  1. django的model字段在保存的时候做预处理怎么办？

    django的model字段在保存的时候做预处理怎么办? 比如这个model: class Book(Model): publish_date = DateField() 但是在保存时,用户输入数据是 ...

  2. Octopus系列之如何让前台的js脚本变得灵活重用

    Octopus系列如何让前台的js脚本变得灵活,重用 方式1:ajax方式 方式2:form表单方式 面向对象的脚本封装 jQuery的封装 做Web开发的少不了前台Ajax的使用, 返回true:f ...

  3. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  4. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  5. Django model字段类型清单

    转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...

  6. js调用.net后台事件、后台调用前台以及js调用服务器控件

    1. javaScript函数中执行C#代码中的函数: 方法一:间接触发后台代码 1.首先建立一个服务端控件按钮命名为btn1,双击进入后台将调用或处理的内容写入btn1_click中; 2.在前台写 ...

  7. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  8. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  9. 前台的js对象数组传到后台处理。在前台把js对象数组转化为json字符串，在后台把json字符串解析为List<>

    前台的js对象数组传到后台处理.在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

随机推荐

  1. wpf常见枚举收集

    Icons made by from www.flaticon.com

  2. HTML中Meta属性http-equiv="X-UA-Compatible"详解

    HTML下head中的http-equiv="X-UA-Compatible"详解: X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这 ...

  3. C#虚方法认识

    C# 中虚方法 1.具体的是new后面具体是那个类,调用的是该类的实现方法.不和基类有关,虽然可以将子类赋值给基类句柄. 但是具体还是调用具体实例化的方法.

  4. luigi学习-luigi的配置文件

    一.luigi配置文件的加载顺序 /etc/luigi/client.cfg luigi.cfg LUIGI_CONFIG_PATH环境变量 二.配置文件分节 配置文件被分为了多个section,每一 ...

  5. 委托、匿名函数与Lambda表达式初步

    (以下内容主要来自<C#本质论第三版>第十二章委托和Lambda表达式) 一.委托续 上上周五看了看委托,初步明白了其是个什么,如何定义并调用.上周五准备看Lambda表达式,结果发现C# ...

  6. 在一般处理程序中，把Form Post过来的表单集合转换成对象 ，仿 MVC post,反射原理

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.L ...

  7. python笔记第二天

    上节内容回顾和补充 编程语言 高级 低级 Python种类 JavaPython cPython ***** pypy 字节码 和 机器码 Python程序: 1. 终端: C:\python35\p ...

  8. 成长记录 if语句输出 由大到小的数字

    #include<stdio.h> void main() { float a,b,c,d,e,f,g,t; scanf("%f,%f,%f,%f,%f,%f,%f", ...

  9. 【转】SQLite提示database disk image is malformed的解决方法

    SQLite有一个很严重的缺点就是不提供Repair命令. 导致死亡提示database disk image is malformed 它的产生有很多种可能,比如,磁盘空间不足,还有就是写入数据过程 ...

  10. [原创]从Oracle和Microsoft Sql Server迁移到PostgreSQL Plus Advanced Server

    一.了解PPAS的迁移方式1.在线迁移和离线迁移使用Migration Studio或Migration Toolkit直接向PPAS数据库进行对象定义和数据表中数据的迁移称为在线迁移,生成要迁移对象 ...