AJAX, Django und HTML auswählen?

Question

Ich habe ein Formular mit vielen Feldern, aber ich habe zwei Auswahlen, eine für die Auswahl des Landes und eine für die Auswahl der Städte des Landes, das ich ausgewählt habe.

Ich möchte Folgendes machen: Wenn ich das Land in der ersten Auswahl auswähle, möchte ich die Städte der zweiten Auswahl ändern, gefiltert nach der ID des Contry, das ich ausgewählt habe.

Hier ist meine Models.py

class country(models.Model): 
    country_name = models.CharField(max_length=264) 
    def __str__(self): 
     return self.country_name 

class country_cities(models.Model): 
    city_name = models.CharField(max_length=264) 
    country = models.ForeignKey(country) 
    def __str__(self): 
     return self.city_name 

Und hier ist meine HTML-Form:

<form method="post"> 
    <input type="text" name="username"> 
    <select name="country" onchange="listCities()"> 
    {% for country in countrylist %} 
     <option value="{{ country.id }}">{{ country.country_name }}</option> 
    {% endor %} 
    </select> 
    <select name="city" id="citylist"> 
    <!--HERE IS WHERE I WANT TO LIST JUST THE CITIES OF THE COUNTRY THAT I SELECTED--> 

    </select> 
</form> 

Wie mache ich meine Ansicht und welche Bibliotheken Ich habe in meinem views.py importieren? Ich bin mir auch nicht sicher, ob meine AJAX-Bibliothek oder mein Skript korrekt ist.

AJAX:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 

SCRIPT:

<script type="text/javascript"> 
    function listCities() 
    { 
    var countryid = $("[name='country']").val(); 
    $('#citylist').html(''); 
    $.ajax({ 
     type: "POST", 
     data: "countryid="+countryid, 
     url: "editprofile/", 
     success: function(result) 
     { 
     var resultObj = JSON.parse(result); 
     var dataHandler = $("#citylist"); 
     $.each(resultObj, function(key, val) 
     { 
      var newRow = $('<option value="'+val.id+'">'); 
      newRow.html(' '+val.city_name +''); 
      dataHandler.append(newRow); 
     }); 

     } 
    }); 
    } 
</script> 

Answer 1

I verwendet getJSON statt POST für etwas ähnliches. Dies setzt voraus, dass Sie onchange aus HTML herausnehmen und change innerhalb von jQuery stattdessen mit einer select Box ID von #countrylist verwenden. Es verwendet den Wert aus dem Auswahlfeld als Lookup id für Land.

Sie brauchen auch eine view für den Ajax Anruf. Die Variable url im AJAX-Bereich wird damit verknüpft. Ihre views.py und script.js könnten so etwas wie diese:

#views.py 
#...other imports... 
from django.core import seralizers 

def select_country(request): 
    if request.method == 'GET' and request.is_ajax(): 
    selected_country = request.GET.get('id') 
    json_city = serializers.serialize("json", country_cities.objects.filter(country_id = selected_country)) 
    return HttpResponse(json_city, content_type='application/json') 
    else: 
    return HttpResponse("no-go") 

#YourScript.js 
$(function(){ 
//...your AJAX configurations would go up here, like CSRF stuff... 

$(document).on('change', "#countrylist", function(e) { 
    e.preventDefault(); 
    console.log($(this).val()); 
    var url = http://127.0.0.1:8000/yourURLtoView 
    $.getJSON(url, {id: $(this).val()}, function(j) { 
     var options = '<option value="">---??---</option>'; 
     for (var i = 0; i < j.length; i++) { 
      options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields['city_name'] + '</option>'; 
     } 
     console.log(options); //This should show the new listing of filtered options. 
     $("#citylist").html(options); 
     $("#citylist option:first").attr('selected', 'selected'); 
    }); 
    $("#countrylist").attr('selected', 'selected'); 
}); 

}); 

Auch, wenn ich empfehlen könnte, dass Sie Ihr country_cities Modell umbenennen nur City zu. Stellen Sie sich Klassen als eine geeignete Entität vor, wie Car oder Person oder Computer. Lassen Sie mich wissen, ob das für Sie funktioniert, da ich versucht habe, es aus einer meiner eigenen Dateien zu transkribieren.