使用jquery列出相关的下拉值django

时间:2013-11-12 06:05:17

标签: jquery python django

我想在django中使用jquery显示相关的下拉值。我的第一个下拉列表包含python,ruby和php等语言。第二个下拉列表包含与语言相关的框架。对于python,框架是django,pylons,grok。对于ruby,框架是rails,cuba。对于php,框架是cakephp,codeignator ...我已经写了3个表名称语言,框架和网站。

models.py

class languages(models.Model):
    lname=models.CharField(max_length=10)
    def __unicode__(self):
        return self.lname

class framework(models.Model):
    fname=models.CharField(max_length=25)
    lang=models.ForeignKey(languages)
    def __unicode__(self):
        return self.fname

class website(models.Model):
    wname=models.CharField(max_length=30)
    framewrk=models.ForeignKey(framework)
    def __unicode__(self):
        return self.wname

Views.py

def lang_fun(request):
    if request.method=='POST':
        l=request.POST.get('l1')
        languages(lname=l).save()
        return HttpResponseRedirect('/frame_fun')
    else:
        return render(request,"languages.html")
def frame_fun(request):
    if request.method=='POST':
        la=request.POST.get('drop1')
        f=request.POST.get('f1')
        framework(lang_id=la,fname=f).save()
        return HttpResponseRedirect('/web_fun')
    else:
        stl=languages.objects.all()
        return render(request,"framework.html",{'stl':stl})
def web_fun(request):
    if request.method=='POST':
        fr=request.POST.get('drop2')
        w=request.POST.get('w1')
        website(framewrk_id=fr,wname=w).save()
        return HttpResponseRedirect('/display')
    else:
        stl=framework.objects.all()
        return render(request,"website.html",{'stl':stl})
def display(request):
    s1=languages.objects.all()
    s=website.objects.all()
    return render(request,"display.html",{'s':s,'s1':s1})

display.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#drop1').on('change', function() { 
             $('#text1').val($('#drop1').val());

             });
    });
</script>
</head>
<body>
<table id="tab1" border="1px">
<tr><th>language</th><th>framework</th><th>website</th></tr>
{% for i in s %}
 <tr><td> {{i.framewrk.lang.lname}}</td>
  <td>{{i.framewrk.fname}}</td>
  <td>{{i.wname}}</td>
  </tr>
  {% endfor %}
</table>
<select id="drop1">
{% for i in s %}
<option value={{i.framewrk.fname}}>{{i.framewrk.lang.lname}}</option>
{% endfor %}
<input type="text" id="text1">
</body>
</html>

在我的views.py中,我添加了语言框架和网站。 在我的display.html中,我展示了相应的语言框架和网站。在访问下拉列表中的语言时,重复的语言取决于它包含的框架数量。我想要它而不重复。我可以在文本框中逐个显示语言框架。我希望它能成为一个人。当我选择python时,我希望python的框架显示在另一个下拉列表中。 你能帮我看看如何编写html和jquery吗?提前致谢。我正在学习python。所以请指导我。

1 个答案:

答案 0 :(得分:1)

它相对容易的任务,但我想说,你曾尝试使用自己的工具做太多,而不是使用django实现的最佳方法。把这一切写成例子需要花费太多时间,所以我将概述我要做的事情来实现同样的事情。

1)使用django表单显示表单并保存/处理模型数据。您可以为不同的选择框创建具有不同字段的单个表单。您将需要条件字段,因为一个字段中的选项取决于另一个字段中的选项。请参阅有关使用条件表单的帖子:(link)。在您的情况下,您需要执行一些操作,例如以 init 方式访问表单绑定数据,并从中读取所选语言/框架值,然后根据这些值设置框架/网站选项。

2)字段更改事件是在进行更改时刷新表单内容的好方法。但是不要发布表格。你可以在同一地址上形成GET。

3)在视图中,您可以将request.POST或request.GET作为初始参数传递给表单。在这两种情况下,这将成为表单的绑定数据 - 您将在表单的 init 方法中使用的数据来确定可用的选项。

4)如果是request.GET,只需再次返回相同的表格。您可以返回刚呈现的表单元素,在网页上您可以使用呈现的html来交换现有表单。不要忘记使用jquery.live方法将'change'事件绑定到表单字段,否则在交换表单后事件将无法工作。

5)仅在实际发布表单时使用POST。

这会让你感到高兴:

1)您将只使用一个视图而不是4.所有这些都可以在一个相对简单的视图中完成。

2)与字段值/选择相关的所有逻辑都将在表单类中,它是imo的最佳位置。

3)你将学会使用OOP,如果你打算坚持使用Django,这将对你有所帮助。

4)作为旁注,你应该看看:link

艾伦