jQueryとDjangoでJSON形式でサーバから返したリストデータをセレクトメニューに表示

DjangoのJSONデータ生成処理も、jQueryのタグ生成処理もなかなか使いやすい。

jQueryでサーバサイドを呼びだし、サーバサイドでDjangoでModelのリストを
JSON化してクライアントに返し、それをselectタグ内のoptionタグとして生成する。

views.py

from django.core import serializers
from django.http import HttpResponse
from testapp.main.models import *
...
def models_reload(request):
model_list = Model.objects.all()
data = serializers.serialize("json", model_list[:30], ensure_ascii=False)
return HttpResponse(data, mimetype="text/javascript")

select.html

{% extends "user/base.html" %}
{% block additional_js %}
<script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript">
      function reloadModels() {
          $("#id_models").empty();
          $.ajax({
              type: "GET",
              url: "/models/reload/",
              data: {},
              dataType: "json",
              success: function(response) {
                  $.each(response, function(i) {
                      model = this;
                      row = "<option value='" + model.pk + "'>";
                      row += model.fields.name;
                      row += "</option>";
                      $(row).appendTo("#id_models");
                  });
              }
          });
      }
      $(function() {
          reloadPlaces();
      });
</script>
{% endblock %}
{% block main_content %}
<select size="8" id="id_models" name="model" style="width: 500px;"></select>
{% endblock %}