How to implement two dropdowns dependent on each other using Django and jQuery
Hello everyone.
With today’s article I want to show how to implement two dropdowns dependent on each other using Django and jQuery.
Suppose we have a 1-N relationship between car brands and car models: we want to show the list of brands in the first dropdown; then once you have selected a brand, the second dropdown will show a list of filtered models for that brand.
Suppose we have our models defined as follows:
class VehicleBrand(models.Model):
description = models.CharField(max_length=100)
code = models.SlugField(primary_key=True)
class VehicleModel(models.Model):
description = models.CharField(max_length=100)
code = models.SlugField(primary_key=True)
brand = models.ForeignKey(VehicleBrand)
Let’s write a templatetag that will be included in our templates:
from models import VehicleBrand
from django import template
register = template.Library()
@register.inclusion_tag("brand_model_select.html")
def brand_model_select():
brand_list = VehicleBrand.objects.all()
return {'brand_list' : brand_list}
As you can see, the templatetag requires a support html template, defined as follow:
<form action="" method="get" accept-charset="utf-8">
<select name="brand" id="brand">
<option value="Z">Select a brand</option>
{% for brand in brand_list %}
<option value="{{ brand.code}}">{{ brand.description }}</option>
{% endfor %}
</select>
<select name="model" id="model" disabled="true">
<option>Select a model</option>
</select>
</form>
<script>
$(document).ready(
function() {
$("select#brand").change(function() {
if ($(this).val() == 'Z') {
$("select#model").html("<option>Select a model</option>");
$("select#model").attr('disabled', true);
}
else {
var url = "/brand/" + $(this).val() + "/all_json_models";
var brand = $(this).val();
$.getJSON(url, function(models) {
var options = '<option value="Z">Select a model</option>';
for (var i = 0; i < models.length; i++) {
options += '<option value="' + models[i].pk + '">' + models[i].fields['description'] + '</option>';
}
$("select#model").html(options);
$("select#model option:first").attr('selected', 'selected');
$("select#model").attr('disabled', false);
});
}
});
$("select#model").change(function(vent) {
if ($(this).val() == -1) {
return;
}
myAwesomeFunctionToCallWhenAModelIsSelected();
});
});
}
</script>
Please note that once a brand is selected, the following url will be invoked via Ajax request:
/brand/”selected_brand_code”/all_json_models
then we need to define a view to handle this request:
def all_json_models(request, brand):
current_brand = VehicleBrand.objects.get(code=brand)
models = VehicleModel.objects.all().filter(brand=current_brand)
json_models = serializers.serialize("json", models)
return HttpResponse(json_models, mimetype="application/javascript")
and in urls.py:
...
(r'^brand/(?P<brand>[-\w]+)/all_json_models/$', 'all_json_models'),
Finally, the javascript method myAwesomeFunctionToCallWhenAModelIsSelected() will be invoked when a model will be selected.
