在Django dependent下拉列表中加载要更新的额外字段

from django.db import models

class MainOption(models.Model):
    name = models.CharField(max_length=100)

class DependentOption(models.Model):
    main_option = models.ForeignKey(MainOption, on_delete=models.CASCADE)
    name = models.CharField(max_length=100)

from django.http import JsonResponse
from .models import MainOption, DependentOption

def load_dependent_options(request):
    main_option_id = request.GET.get('main_option_id')
    dependent_options = DependentOption.objects.filter(main_option_id=main_option_id)
    options = [{'id': option.id, 'name': option.name} for option in dependent_options]
    return JsonResponse(options, safe=False)

from django.urls import path
from .views import load_dependent_options

urlpatterns = [
    path('load_dependent_options/', load_dependent_options, name='load_dependent_options'),
]

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#main_option').change(function() {
            var main_option_id = $(this).val();
            $.ajax({
                url: '/load_dependent_options/',
                data: {
                    'main_option_id': main_option_id
                },
                dataType: 'json',
                success: function(options) {
                    var dependent_option = $('#dependent_option');
                    dependent_option.empty();
                    $.each(options, function(index, option) {
                        dependent_option.append($('<option></option>').attr('value', option.id).text(option.name));
                    });
                }
            });
        });
    });
</script>

<select id="main_option">
    <option value="">请选择主下拉列表选项</option>
    {% for option in main_options %}
        <option value="{{ option.id }}">{{ option.name }}</option>
    {% endfor %}
</select>

<select id="dependent_option">
    <option value="">请选择从属下拉列表选项</option>
</select>