在我做的项目中有个选择省城市的选项，这两个字段的关系是一对多的关系
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. 取得Android平台某设备上所有可用的Sensors

    本来要写一个检测手机的温度的小应用,学习一下传感器的api,可结果怎么写不行.经检测,发现取得的Sensor为NULL,这才明白,我手机没有TYPE_AMBIENT_TEMPERATURE传感器. 于 ...

  2. SQL中如何检查死锁

    SQL中如何检查死锁 编写人:CC阿爸 2014-6-15 在日常SQL数据库的操作中,SQL偶尔会出现表被死锁的问题.比如: 在执行事务时,突然中止事务.系统肯定会锁表. 大批量数据操作时,由于网络 ...

  3. NetCat使用手册

    简介:   在网络工具中有“瑞士军刀”美誉的NetCat(以下简称nc),在我们用了N年了至今仍是爱不释手.因为它短小精悍(这个用在它身上很适合,现在有人已经将其修改成大约10K左右,而且功能不减少) ...

  4. ansible的playbook组件

    playbook的核心元素: tasks: 任务 variables: 变量 templates: 模板 handlers: 处理器 roles: 角色 组织格式:YAML(被称为另外一种标记语言) ...

  5. 用开源中国(oschina)Git管理代码（整合IntelliJ 13.1.5）

    简介 开源中国提供了Git服务(地址:http://git.oschina.net/),在速度上比国外的github要快很多.使用了一段时间,感觉很不错.oschina git提供了演示平台,可以运行 ...

  6. Delphi CxGrid 汇总（4）

    1.     CxGrid汇总功能 ① OptionsView-Footer设置为True,显示页脚   ② CxGrid的Summary选项卡定义要汇总的列和字段名及汇总方式,Footer选项卡定义 ...

  7. 十天学会单片机Day1点亮数码管(数码管、外部中断、定时器中断)

    1.引脚定义 P3口各引脚第二功能定义 标号 引脚 第二功能 说明 P3.0 10 RXD 串行输入口 P3.1 11 TXD 串行输出口 P3.2 12 INT0(上划线) 外部中断0 P3.3 1 ...

  8. Simplified Memory Modle C/C++内存模型

    最近学习c++看视频时,老师时常提到栈区堆区,搞不清楚,只能泪目,毕竟爱过...因此,接下来对此做些整理,方便回顾.(老师说:这个简化模型仅用于初学者示意,与实际模型并不完全一致) 1.stack(栈 ...

  9. 一些关于python的小感想

    python是一门优秀的语言,但随之而来的是大量的知识,各种模块,相信一个人的大脑是很难记住如此多的内容.这时后的我们就应该想办法避免去记忆这么多的内容. 1.查看官方文档(英语很重要,啥也不说了) ...

  10. C#调用C++ Dll

    现在项目基本都是旁边C++的哥们做好dll扔给我,然后我调用.好久之前晚上down了一份c#调用c++dll的方法,出处早已经遗忘.闲来无事,放上来好了.原作者看到后可以留言,我会把您链接放上的,帮了 ...