Django JavaScript 下拉菜单

2 投票

3 回答

4374 浏览

提问于 2025-04-17 15:10

我刚开始学习Python和JavaScript，已经学了几个月Python，觉得非常喜欢。我在玩Django，这个框架很酷。我想知道如何让这个模型和JavaScript一起工作。希望有人能详细解释一下代码的内容，因为我想全面理解从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>

3 个回答

在使用json.dumps之前，你应该先把查询结果转换成列表，不然会出现一个错误，提示内容是“不能转成JSON格式”。

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)

回答于 2025-04-17 由 Python大师

分享举报

其实你不需要用JavaScript来做那些花哨的下拉菜单。你可以用Django的表单功能来帮你完成这件事。你只需要在forms.py文件里告诉它用户可以选择哪些选项，然后它就会自动生成表单，你根本不需要做其他的工作。

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

回答于 2025-04-17 由 Python大师

分享举报

如果你想在JS中解决这个问题，可以按照我下面的方法来做。

首先，创建一个模板，里面包含两个下拉列表的内容。

<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对象。

回答于 2025-04-17 由 Python大师

分享举报

Django JavaScript 下拉菜单

3 个回答

撰写回答