django、jQuery、都道府県と市区町村のセレクタを連動させたい

こちらやこちらのページのように、
セレクタを連動させたいです。

上記のページと違うのは、以下2つです。
・optionの中には、djangoのモデルで定義したものを使いたい
・ユーザー登録機能の中で、選択できるようにしたい

models.py

python
1class Prefecture(models.Model):
2    name = models.CharField(verbose_name='都道府県名', max_length=20)
3
4    def __str__(self):
5        return self.name
6
7class City(models.Model):
8
9    name = models.CharField(verbose_name='市区町村名', max_length=20)
10    parent = models.ForeignKey(
11        Prefecture, verbose_name='都道府県', on_delete=models.CASCADE, null=True)
12
13    def __str__(self):
14        return self.name

views.py

class UserCreate(CreateView):
    """ユーザー仮登録"""
    template_name = 'myapp/user_create.html'
    form_class = UserCreateForm
    def form_valid(self, form):
        """仮登録と本登録用のメールの発行"""
        user = form.save(commit=False)
        user.is_active = False
        user.save()

        # アクティベーションURLの送付
        current_site = get_current_site(self.request)
        domain = current_site.domain
        prefecture = form.cleaned_data.get('prefecture')
        city = form.cleaned_data.get('city')
        context = {
            'protocol': self.request.scheme,
            'domain': domain,
            'token': dumps(user.pk),
            'user': user,
            'prefecture': prefecture,
            'city': city,
        }

        #本人確認メール
        subject = "会員登録のお知らせ"
        message_template = get_template(
            'myapp/mail_template/create/message.txt')
        message = message_template.render(context)
        user.email_user(subject, message)

        return redirect('myapp:user_register_done')

forms.py

class UserCreateForm(UserCreationForm):
    """ユーザー登録用フォーム"""
    prefecture = forms.ModelChoiceField(queryset=Prefecture.objects, label='都道府県',
                                        empty_label='選択してください')
    city = forms.ModelChoiceField(queryset=City.objects, label='市区町村', required=False,
                                        empty_label='選択してください')
    class Meta:
        model = User
        fields = ('email','password1','password2')
        widgets = {
            'email': forms.TextInput(attrs={
                'class': 'form-control'
            }),
        }

user_create.html

html
1{% extends "./base.html" %}
2{% block content %}
3<h2>会員登録</h2>
4<form action="" method="POST" enctype="multipart/form-data">
5    {{ form.non_field_errors }}
6    <table class="table table-hover">
7            <tbody>
8                    <tr>
9                        <th>{{ form.prefecture.label }}</th>
10                        <td>{{ form.prefecture}}</td>
11                    </tr>
12                    <tr>
13                        <th>{{ form.city.label }}</th>
14                        <td>{{ form.city}}</td>
15                    </tr>
16                    <tr>
17                        <th>{{ form.email.label }}</th>
18                        <td>{{ form.email }}</td>
19                    </tr>    
20                    <tr>
21                        <th>{{ form.password1.label }}</th>
22                        <td>{{ form.password1 }}</td>
23                    </tr>
24                    <tr>
25                        <th>{{ form.password2.label }}</th>
26                        <td>{{ form.password2 }}</td>
27                    </tr>
28            </tbody>
29    </table>
30    <div class="text-center">
31        <button type="submit" class="btn">会員登録をする</button>
32    </div>
33</form>

上記のようにすると、都道府県、市区町村ともに、モデルで定義したものを選択できるのですが、
連動はしていません。

以下のようにすると、連動はするのですが、djangoで定義したモデルを使ってはいません。

html
1    <select class="parent" name="prefecture">
2        <option value="" selected="selected">都道府県を選択</option>
3        <option value="北海道">北海道</option>
4        <option value="東京都">東京都</option>
5        <option value="沖縄県">沖縄県</option>
6    </select>
7    <select class="children" name="city" disabled>
8            <option value="" selected="selected">市区町村を選択</option>
9            <option value="札幌市" data-val="北海道">札幌市</option>
10            <option value="函館市" data-val="北海道">函館市</option>
11            <option value="港区" data-val="東京都">港区</option>
12            <option value="渋谷区" data-val="東京都">渋谷区</option>
13            <option value="那覇市" data-val="沖縄県">那覇市</option>
14            <option value="名護市" data-val="沖縄県">名護市</option>
15    </select>
16

main.js

$(function () {
    var $children = $('.children');
    var original = $children.html();

    $('.parent').change(function () {
        var val1 = $(this).val();
        
        $children.html(original).find('option').each(function () {
            var val2 = $(this).data('val');
            if (val1 != val2) {
                $(this).not(':first-child').remove();
            }
        });

        if ($(this).val() == "") {
            $children.attr('disabled', 'disabled');
        } else {
            $children.removeAttr('disabled');
        }
    });
});

最悪、都道府県、市区町村を全てhtmlに書こうと思っていますが、
何か良い解決策をお持ちの方、アドバイスいただけると助かります。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

答えは「Ajax」を使います

下記の様な構成にします
サーバ側
views.pyの中に都道府県を引数に渡すとその市区町村が格納されたJSONを返すページを作ります。
クライアント側
都道府県の変更を感知したら、views.pyにAjaxでGetして、JSONデータをもらいます。その後は、JSONをJavascriptでHTMLの適切な箇所に適切な表記で埋め込めばいいんです

投稿2019/02/28 05:39