I have 2 tables in Django
db.sqlite3
database both having state_id
as a common field on the basis of which I had to map the districts for respective states in dropdown using Jquery
state_database
id state_id state_name
3 3 Uttarakhand
2 2 Punjab
1 1 Haryana
district_database
id state_id district_id district_name
1 1 1 Sonipat
2 1 2 Rohtak
3 1 3 Amabala
4 1 4 Sirsa
5 2 5 Amritsar
6 2 6 Ludhiana
7 3 7 Pantnagar
8 3 8 Almora
For Doing so, I had to assign the common field / state_id
as value in HTML like value= '{{state.state_id}}'
<select class="form-control" id="state_from_dropdown" name="state_from_dropdown" aria-label="...">
<option selected disabled="true"> --- Select State --- </option>
{% for state in StatesInDropdown %}
<option value= '{{state.state_id}}'> {{state.state_name}} </option>
{% endfor %}
</select>
<select class="form-control" id="district_from_dropdown" name="district_from_dropdown" aria-label="...">
<option selected disabled="true"> --- Select District --- </option>
{% for disitrict in DistrictsInDropdown %}
<option value= '{{disitrict.state_id}}'> {{disitrict.district_name}} </option>
{% endfor %}
</select>
Views.py
def inputconfiguration(request):
if request.method == "POST":
StateName=request.POST.get('state_from_dropdown')
DistrictName=request.POST.get('district_from_dropdown','')
print(StateName, DistrictName)
return render(request, 'configure_inputs.html')
Instead of Getting Actual Fields/Names which appears in the dropdown, I get the values of ID's, but I want the names of states and districts instead of their ID's
models.py
class state_name(models.Model):
state_id = models.PositiveIntegerField(validators=[MinValueValidator(1.0), MaxValueValidator(100.0)])
state_name = models.CharField(max_length=100)
class district_name(models.Model):
state_id = models.PositiveIntegerField(validators=[MinValueValidator(1.0), MaxValueValidator(100.0)])
district_id = models.PositiveIntegerField(validators=[MinValueValidator(1.0), MaxValueValidator(100.0)])
district_name = models.CharField(max_length=100)
urls.py
urlpatterns = [
path('inputconfiguration', views.inputconfiguration, name='inputconfiguration')
]
JQuery for Dropdown of Districts
based on States
$(document).ready(function(){
var states = $('#state_from_dropdown');
districts = $('#district_from_dropdown');
districtOptions = districts.find('option');
// console.log("$option_list", districtOptions)
states.on('change',function(){
districts.html(districtOptions.filter('[value="'+this.value+'"]'));
}).trigger('change');
});
How to do so?