Зависимый выпадающий список не работает (нет динамического эффекта) -Django
Здравствуйте, я хочу связать поле1 с другим полем2, История в том, что у меня есть 2 поля, (два из них выбираемые)
* Первое поле связано с семейством категорий (пользователь выбирает :категория1 или категория2), Я хочу, чтобы если пользователь выберет в поле1: опцию category1, в поле 2 появилась группа выбираемых значений, связанных с этой выбранной категорией (в поле1), иначе, если пользователь выберет другую категорию (в поле 1), в поле2 появятся другие значения, которые будут отображаться для ее выбора.
Я пробовал сделать это с помощью Jquery, но кажется, что это не работает ad I do no , потому что не было никакой ошибки:
Вот models.py двух полей, о которых я говорю:
Об области1:
class Category(models.Model):
name = models.CharField(verbose_name=" Name ", max_length=60)
pid = models.CharField(max_length=20, choices=ID_CATEGORY)
def __str__(self):
return self.name
О поле2:
class ProfileSize(models.Model):
name = models.CharField(verbose_name=" Name ", max_length=60)
pid = models.CharField(max_length=20, choices=ID_CATEGORY)
def __str__(self):
return self.name
Вот другая модель, где я вызываю модель поля1 и модель поля2:
class Geometry(models.Model):
profile_family = models.ForeignKey(Category, on_delete=models.CASCADE)
profile_size = models.ForeignKey(ProfileSize, on_delete=models.CASCADE)
Вот views.py :
def form_geometry(request):
categoryobj = Category.objects.all()
sizeobj = ProfileSize.objects.all()
if request.method == "POST":
form = FormGeometry(request.POST)
else:
form = FormGeometry()
return render(request, 'options.html', {'form': form, 'categoryobj': categoryobj, 'sizeobj': sizeobj})
О коде html:
<div>
<p>---Select List Depends on--- </p>
<select id="select1">
<option selected disabled="true"></option>
{% for categories in categoryobj%}
<option value="{{categories.pid}}">{{categories.name}}</option>
{% endfor%}
</select>
<select id="select2">
<option selected disabled="true"></option>
{% for items_size in sizeobj%}
<option value="{{items_size.pid}}">{{items_size.name}}</option>
{% endfor%}
</select>
</div>
Об js и jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $select1=$('#select1'),
$select2=$('#select2'),
$options = $select2.find('option');
$select1.on('change',function()
{
$select2.html($options.filter('[value="'+this.value+'"]'));
}).trigger('change');
});
</script>
</head>
Помогите пожалуйста, кто-нибудь может сказать, почему это не работает (нет динамического эффекта, нет изменений)
Заранее спасибо.