Um caminho (talvez o mais óbvio) é a utilização de javascript, no primeiro select você seta um onchange que chama uma função para "popular" o segundo select.
Tem um demo aqui que se encaixa perfeitamente na sua questão, basta fazer as devidas adaptações. Não se deixe intimidar pelo código na seção javascript (parte de baixo). O cara criou arrays com vários países/estados do mundo, por isso ficou tao extenso, vá direto lá pra baixo nas duas funções (populateStates e populateCountries).
Basicamente, ele fez o seguinte, chama essas duas funções quando a página é carregada e popula os dois selects (como o pais ainda não foi escolhido, o select dos estados fica vazio), nessa ocasião, na função populateCountries ele altera o onchange do select dos países para chamar a função que popula os estados (populateStates) enviando os objetos para ela.
Tente adaptar, se não conseguir, poste aqui o problema.
Editado a partir de 20/03/2017 ( a partir daqui)
Ok, Como combinado (nos comentários dessa resposta), gastei meu sábado para criar minha própria versão para tentar responder o que foi solicitado. A explanação aqui é somente para elucidar como foi o processo de pegar os dados do banco, passar para a template django e, por fim, entregar ao JS. O projeto (em Django), completo e funcional pode ser baixado nesse repo github.
No exemplo vamos utilizar um cadastro de veículos em uma frota (veja que não me ocupei com a gravação dos dados no banco, foquei somente no que foi solicitado na pergunta). Há dois models principais para a demonstração, um para as marcas (Brands) e outro para os modelos dos veículos (Car).
models.py
from django.db import models
import json
class Brand(models.Model):
company_name = models.CharField(max_length=100)
def __str__(self):
return self.company_name
class Car(models.Model):
brand = models.ForeignKey(Brand)
name = models.CharField(max_length=100)
def __str__(self):
return {'name': self.name, 'brand': self.brand.company_name}
É importante notar que foi utilizado um artificio na funcao __str__ do model Car, para que a chamada a objects.all() retorne um dicionário com o nome e a marca dos modelos.
Com os models prontos, vamos à view, que o é a função principal para tornar os dados disponíveis para a template e, consequentemente, ao JS.
import json
from django.shortcuts import render
from .models import Brand, Car
def regcar(request):
brands = Brand.objects.all()
cars = Car.objects.all()
dcars = {}
for car in cars:
brand = str(car.brand)
if brand in dcars:
dcars[brand].append(car.name)
else:
dcars[brand] = [car.name]
cars = json.dumps(dcars)
brands = json.dumps([str(b) for b in brands])
return render(request, 'core/regcar.html', {'brands': brands, 'cars': cars})
Essa view faz, essencialmente o seginte:
- Seleciona de models os objetos Brand (marcas) e atribui à variável
brands;
- Seleciona de models os objetos Car (modelos) e atribui à
variável cars;
- Converte as duas variáveis para o formato JSON;
- Renderiza a template regcar.
A template é muito simples, tem apenas uma div com os dois selects, devidamente identificados pelo ID. Embora aqui seja apresentado de forma separada, o script JS está incluso na template, para que seja carregado juntamente com a mesma (poderia ser através de um block, WYL.). No processo de carga, o select identificado como 'brand' será carregado por uma função JS.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="{% static "css/style.css" %}" rel="stylesheet">
<meta charset="UTF-8">
<title>Populating a Select with Django</title>
</head>
<body>
<h1>Populate one dropdown based on selection in another.</h1>
<p>Change the contents of dropdown Car based on the selection in dropdown Brand, using Django + Javascript:</p>
<div class="select-style">
<br />Brand:
<select required id="brand">
</select>
<br />
<br />Car:
<select id="car" >
</select>
</div>
</body>
</html>
O código javascript é carregado juntamente com a template, nesse momento
são criadas duas variáveis que recebem os valores JSON que foram enviadas à template pela view, veja que basta fazer a atribuição normalmente, como se estivesse no python ou na própria template. Além da criação dessas variáveis, o evento onchange do select das marcas (brand) é direcionado para a função populateCar(), onde o select cujo id=car (modelos dos carros) é preenchido todas as vezes que onchange do select brand é modificado. Finalmente, a função populateBrand() é chamada para preencher o select das marcas (brand).
<script language="javascript">
$('#brand').change(function() {populateCar()});
var cars = {{ cars|safe }}
var brands = {{ brands|safe }}
populateBrand();
function populateBrand() {
$("#brand").empty();
$("#brand").append('<option value="" disabled selected>Select your option</option>');
$.each(brands, function(v) {
$('#brand')
.append($("<option></option>")
.attr("value", brands[v])
.text(brands[v]));
})
}
function populateCar(event) {
brand = $("#brand option:selected" ).text();
$("#car").empty();
$("#car").append('<option value="" disabled selected>Select your option</option>');
for (let [b, bcars] of Object.entries(cars)) {
if (b==brand) {
for (car in bcars) {
$('#car')
.append($("<option></option>")
.attr("value", bcars[car])
.text(bcars[car]));
}
}
}
}
</script>
Layout (Firefox)

Links:
Essa mesma questão no STOen:
https://stackoverflow.com/a/43074402/2879341
Projeto completo em Django:
http://jsfiddle.net/bdhacker/eRv2W/
Versão codepen:
https://codepen.io/Sidon/pen/yMpbKg
Versão Fiddle:
https://jsfiddle.net/Sidon/6m1nf0zu/62/
select
possuem o mesmoid
. Atente-se a isso.