在我做的项目中有个选择省城市的选项，这两个字段的关系是一对多的关系
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. 导出excel表功能

    前台: <asp:Button ID="btndao" runat="server"  Text="导出excel文件" onclic ...

  2. 如何在某个按钮上触发 bootstarp Modal 组件

    <?php Modal::begin([ 'id'=>'myModal', 'header' => '<h2>标题</h2>']); echo '内容'; M ...

  3. SQL SERVER连接字符串学习

    在使用connection string时遇到一些问题 字符串如下"Data Source= ******;Initial Catalog=******;Persist Security I ...

  4. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  5. BGP学习笔记

    源自红茶三杯: BGP应用于大规模网络或运营商,用作在AS间传递路由信息 使用BGP的三大理由 1. 大量路由需要承载, IGP只能容纳千条,而BGP可以容纳上万(应该是IGP结合BGP使用?) 2. ...

  6. PHP系统函数

    (一)字符串处理函数 Chr函数 作用:根据ASCII码返回相应的字符. 语法:string chr(int ascii): Chop函数 作用:去除字符串中连续空格和空白行. 语法:string c ...

  7. scala实现kmeans算法

    算法的概念不做过都解释,google一下一大把.直接贴上代码,有比较详细的注释了. 主程序: import scala.io.Source import scala.util.Random /** * ...

  8. [转]SQLServer 2008以上误操作数据库恢复方法——日志尾部备份

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...

  9. ED/EP系列6《扩展应用》

    包括:电子钱包复合应用:电子钱包灰锁应用. 1. 复合应用模式 Ø INITIALIZE FOR CAPP PURCHASE(复合应用消费初始化): Ø UPDATE CAPP DATA CACHE( ...

  10. 使用dom4j技术对xml文件的基本操作

    1．pojo类:Notice package com.green.notice.storage; import java.util.ArrayList; import java.util.List; ...