I'm trying to do this. A view with Three drop down lists like
The values in the list should be from model values. Or a separate things. I just want to capture the results and store the results in a db.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Update Drop-Down Without Refresh</title>
<script type="text/javascript" charset="utf-8">
function FilterModels() {
var makeslist = document.getElementById('makes');
var modelslist = document.getElementById('models');
var make_id = makeslist.options[makeslist.selectedIndex].value;
var modelstxt = new Array();
modelstxt[1] = "1\tEscort\n2\tTaurus";
modelstxt[2] = "1\tAltima\n2\tThilip";
var models = modelstxt[make_id].split("\n");
for (var count = modelslist.options.length-1; count >-1; count--){
modelslist.options[count] = null;
}
for (i=0; i<models.length; i++){
var modelvals = models[i].split("\t");
var option = new Option(modelvals[1], modelvals[2], false, false);
modelslist.options[modelslist.length] = option;
}
}
</script>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
{% load bootstrap3 %}
<p>This is a proof of concept to update a select (drop-down) list of values, based on the selection of another select (drop-down) element using ajax.</p>
<form action="" method="POST" accept-charset="utf-8">
{form.as_p}
{% csrf_token %}
<select name="makes" onchange="FilterModels()" id="makes">
{%for i in cd %}
{{i}}
{%endfor%}
</select>
<select name="models" id="models">
<option>Choose Make</option>
</select>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Can anyone help. .?