Estou utilizando uma função tirada desse site:
https://github.com/nodet07/Django-Related-DropDowns
A Função funciona perfeitamente, quando seleciono uma opção em um dropdown, no 2º DropDown já me traz o que eu quero, o único problema é após clicar no botão submit que não me traz os campos selecionados desses dropdowns, acredito que eu não estou sabendo como usar o método POST no javascript. Não tenho muito conhecimento em javascript/ajax. Segue abaixo pequena parte de um exemplo do que estou tentando fazer:
Model
class Regiao(models.Model):
marca=models.IntegerField('Marca', null=True, blank=True,)
cor=models.ForeignKey('cor.Cor', verbose_name=u'Cores', null=True, blank=True,)
Form
class RegiaoForm(forms.ModelForm):
class Meta:
model=Regiao
fields=['marca', 'cor']
Views
form = RegiaoForm(request.POST or None)
if form.is_valid():
saveMarca = request.POST['marca']
return redirect('apps.past.views.marcas')
marcas=Marca.objects.all()
return render_to_response('marca.html', {'form':form, 'marcas':marcas}, context_instance=RequestContext(request))
def log_getdetails(request):
selected_marca = ""
marca_name = request.GET['cnt']
result_set = []
all_cores = []
marca_name = marca_name.split()
marca_name = str(marca_name[2])
selected_marca = Marca.objects.get(name=marca_name)
all_cores = selected_marca.cor_set.all()
for cor in all_cores:
result_set.append({'name': cor.name})
return HttpResponse(json.dumps(result_set), mimetype='application/json', content_type='application/json')
Template
JAVASCRIPT
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
<script>
$(document).ready(function(){
$('select#selectmarcas').change(function () {
var optionSelected = $(this).find("option:selected");
//var valueSelected = $(this.result).find("option:selected");
var marca_name = optionSelected.text();
data = {'cnt' : marca_name};
ajax('/getdetails',data,function(result){
console.log(result);
$("#selectcores option").remove();
$("#selectcores").append('<option>'+'TODOS'+'</option>');
for (var i = result.length - 1; i >= 0; i--) {
$("#selectcores").append('<option>'+ result[i].name +'</option>');
};
});
});
});
</script>
HTML
{% block content %}
<form class="form-horizontal" method="post">
{% csrf_token %}
{% load add_attr %}
<select class="form-control" name="selectmarcas" id="selectmarcas" >
<option value="">TODAS</option>
{% for marca in marcas %}
<option value="{{marca.id }}">{{ marca.name }}</option>
{% endfor %}
</select>
</div>
</div>
<br/>
<div class="row {% if form.cor.errors %}has-error{% endif %}">
<label class="col-md-2 control-label" for="{{form.cor.auto_id }}">
{{form.cor.label }}
</label>
<div>
<select class="form-control" name ="selectcores" id="selectcores">
<option value="">TODAS</option>
</select>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
{% endblock %}
O que eu preciso é que além de fazer um dropdown dependente do outro é poder salvar as informações que selecionei após dar o submit. Me desculpe caso coloquei muita informação, mas estou tentando deixar mais claro minha pergunta.