在我做的项目中有个选择省城市的选项，这两个字段的关系是一对多的关系
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. 在网页中使用H1标记的须注意的事项

    H1标签是网站排名非常重要的一个因素,因此我们一定要正确使用它. 本文为你介绍H1标签使用的七大注意事项: 1.每个页面都应该有H1标签,H1标签是每个网页不可缺少的要素. 2.使用H1标签的内容应该 ...

  2. 设置trace SQL

    Select PeopleTools, Utilities, Debug, Trace SQL to access the Trace SQL page. You use this page to c ...

  3. Webservice SOAP传输序列化总结 以及webservice之序列化以及反序列化实例

    一.所有Webservice中传递的对象都必须能够序列化,这个是作为在网络之间传输的必要条件.XML WebService和SOAP标准支持的数据类型如下: 1.基本数据类型. 标准类型,如:int ...

  4. JSON,JSONP

    http://blog.csdn.net/huaishuming/article/details/40046729 说明: 在做2个系统间传值时出现: 已阻止交叉源请求:同源策略不允许读取 http: ...

  5. mongodb 修改数据结构的一个例子以及小梳理

    mongodb的存储结构是灵活可变的,但是,并不意味着我们就肆意地使用不规则的文档结构.不规则的文档结构对于开发和后期的维护都是一个灾难.所以,还是要有一个约定的格式. 但是,由于前期设计的不周详和其 ...

  6. 十款基础级WordPress插件

    1.Akismet插件 Akismet是全球最受欢迎的反垃圾插件,专为对抗"博客spam"."评论spam"而生.Akismet是WordPress官方插件之一 ...

  7. Treeview获取父节点

    private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object&g ...

  8. spark 集合交集差集运算

    intersect except是spark提供的集合差集运算, 但是要求参与运算的两个dataframe,有相同的data Schema. 如果我想从 集合1(attribute1, attribu ...

  9. java的基本数据类型特征

    java的数据类型分为基本数据类型和引用数据类型. 基本数据类型分为数值型.字符型(char).布尔型(boolean) 数值型变量 1.整数型 类型 占用存储空间 表示范围 byte 1字节Byte ...

  10. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...