0

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?

  • I deleted my answer, since I missed something very important. Sorry. Bottom line, you must give the district options different values than the state options. Your JQuery must target the district options in a different manner than using `this.value`. Check out this [answer](https://stackoverflow.com/a/25710112/10951070) for a good way to approach this. – raphael Mar 06 '22 at 18:22
  • Sure @raphael, I would try that. Although your answer was brief and had information. You might have kept it. & Thanks for your time. – Abhilash Singh Chauhan Mar 06 '22 at 18:35

0 Answers0