我是 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>
最佳答案
如果你想用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 以包含从 View 传递到模板的 JSON 对象。
关于javascript - Django JavaScript 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14763701/