django Javascript 下拉菜单答案

【问题标题】：django Javascript dropdowndjango Javascript 下拉菜单
【发布时间】：2013-01-23 16:41:23
【问题描述】：

我是 Python 和 Javascript 编程的新手，我已经学习 Python 几个月了，我很喜欢它。我一直在玩 django，这很酷我想知道如何使这个模型与 Iavascript 一起工作。我希望有人尽可能多地解释所涉及的代码，因为我只是要全面了解从 django 到 Javascript 的过程。

我想动态地是CarModel.objects.filter(make ='somename') 或者只是'somename'。

这是一个正在使用的测试模型，因为它类似于我用于在线教程 (YouTube) 的 Javascript，脚本也在下面：

class Make(models.Model):
    name  = models.CharField(max_length=50,blank=True,null = True)
    #so so so so

class CarModel(models.Model):
    name  = models.CharField(max_length=50,blank=True,null = True)
    make = models.ForeignKey(Make,blank=True,null = True)

现在您将如何将这样的内容传递给您的 Javascript？

class Model(ModelForm):
    make = forms.ModelChoiceField(queryset= Model.objects.none(), required=True)

    def __init__(self, somemake,*args, **kwargs):
        super(Model, self).__init__(*args, **kwargs)
        self.fields['property'].queryset = Model.objects.filter(make = somemake)

    class Meta:
        model = Model
        exclude= ('make')

<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Chevy"){var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } 
else if(s1.value == "Dodge"){
    var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
    var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
    }
    }
</script>

这里是html

Choose Car Make:
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
          <option value=""></option>
          <option value="Chevy">Chevy</option>
          <option value="Dodge">Dodge</option>
          <option value="Ford">Ford</option>
    </select>

   Choose Car Model:
  <select id="slct2" name="slct2"></select>

【问题讨论】：

您的实际问题是什么？
好吧，这没关系，但它不会改变 django 表单，它会像这样 {{form.as_p}}

标签： javascript python django django-forms dom-events

【解决方案1】：

你不需要 javascript 来做一些花哨的下拉菜单。你可以使用 Django Forms 来为你做这件事。您只需向 forms.py 提供有关用户可以做出的选择的一些信息，您就可以呈现您的表单，而无需您做更多的事情。

看看我的forms.py，看看我是怎么做到的。

【讨论】：

【解决方案2】：

如果你想在 JS 中做，这就是我解决问题的方法。

首先为 2 个选择列表创建一个包含以下内容的模板。

<html>
<head>
<script>
var json = {
    "Chevy": ["chev1", "chev2", "chev3"],
    "Dodge": ["dodge1", "dodge2", "dodge3"],
    "Ford": ["ford1", "ford2", "ford3"]
};

function carMake () {
    select = document.getElementById('slct1');
    select.options.length = 0;
    for(make in json) {
        select.options[select.options.length] = new Option(make, make);
    }
}

function carModel(sel) {
    var car_make = sel.options[sel.selectedIndex].value
    select = document.getElementById('slct2');
    select.options.length = 0;
    for(var i=0;i<json[car_make].length;i++) {
        select.options[select.options.length] = new Option(json[car_make][i], i);
    }
}
</script>
</head>

<body>
Choose Car Make:
<select id="slct1" onchange="carModel(this)"></select>
<script> carMake(); </script>

Choose Car Model:
<select id="slct2" name="slct2"></select>
</body>
</html>

当动态填充的汽车模型选择字段发生变化时，上述 JS 将读取 JSON 对象并更新汽车品牌。

要使用您提供的模型生成 JSON 对象，您需要执行以下操作：

在view.py文件中：

from <your-app>.models import Make
from <your-app>.models import Model
import json

json_dict = {}
for car_make in Make.objects.all():
    json_dict[car_make] = Model.objects.filter(make=car_make)
json_data = json.dumps(json_dict)

然后您将json_data 添加到您的响应渲染上下文中。

最后修改上面的模板，让 JS 变量 json 被渲染成包含从视图传递到模板的 JSON 对象。

【讨论】：

谢谢，但是你现在把表单作为表单传递给你，这个在
看看将您的 Django 表单嵌入到模板中。 Django Projects 文档站点中的主题链接非常好。 docs.djangoproject.com/en/dev/topics/forms/…

【解决方案3】：

您应该在使用 json.dumps 之前将查询集转换为列表，否则它会给您一个错误“NOT JSON SERIALIZABLE”

from <your-app>.models import Make
from <your-app>.models import Model
import json

json_dict = {}
for car_make in Make.objects.all():
    json_dict[car_make] = list(Model.objects.filter(make=car_make).value())
json_data = json.dumps(json_dict)

【讨论】：