title: How to make ajax request for dependent drop down
body: <p>I am new to programming and learning django. I am struggling to understand how to make ajax request to fetch data to create dependent dropdown lists. I have looked around on various google searches and stackoverflow but I get more confused looking at them. Hence, I could not move forward with fetching the dependent values</p>
  <p>My code for html looks like this</p>
  <pre><code>&lt;select name =&quot;services&quot; id=&quot;serviceA&quot;&gt;
                                  &lt;option disabled selected=&quot;true&quot;&gt; -- Select Category -- &lt;/option&gt;
                                   {% for item in serv %}&quot;
                                  &lt;option value=&quot;{{ item.id }}&quot; &gt;{{ item.name }}&lt;/option&gt; 
                                  {% endfor %} 
                              &lt;/select&gt;
  
                          &lt;select name =&quot;subcategories&quot; id=&quot;subcategoryA&quot;&gt; 
                              &lt;option disabled selected=&quot;true&quot;&gt; -- Select Service -- &lt;/option&gt;
                              {% for item2 in subcategory %}&quot;
                              &lt;option value=&quot;{{ item2.id }}&quot; &gt;{{ item2.name }}&lt;/option&gt;
                              {% endfor %} 
                          &lt;/select&gt;
  </code></pre>
  <p>My views.py looks like this</p>
  <pre><code>def book(request):
  employees = Employee.objects.values_list('name',flat=True)
  services_ = Service.objects.values_list('name',flat=True)
  services = []
  serv = Service.objects.all().order_by('-id')
  subcategory = SubCategory.objects.all().order_by('-id')
  # subcategory = SubCategory.objects.get(pk=request.GET('service_pk'))
  for i in services_:
      services.append(i)
      context = {
      'employees':employees,
      'services':services,
      'serv':serv,
      'subcategory':subcategory,
  }
  
  return render(request,'book.html',context=context)
  </code></pre>
  <p>my urls.py is set like this among others</p>
  <pre><code>path('service/&lt;int:service&gt;', services, name='services'),
  </code></pre>
  <p>my models.py looks like this</p>
  <pre><code>def rand_slug():
  return ''.join(random.choice(string.ascii_letters + string.digits) for _ in range(8))
  
  # Create your models here.
  
  def path_and_rename(instance, filename):
  upload_to = 'uploads/images'
  ext = filename.split('.')[-1]
  # get filename
  if instance.pk:
      filename = '{}.{}'.format(instance.pk, ext)
  else:
      # set filename as random string
      filename = &quot;PTB-&quot; + '{}.{}'.format(uuid.uuid4().hex[:16], ext)
  # return the whole path to the file
  return os.path.join(upload_to, filename)
  
  class Service(models.Model):
  name = models.CharField(max_length=100,blank=True,null=True)
  description = models.CharField(max_length=100,blank=True,null=True)
  startprice = models.DecimalField(max_digits=10,default=0.00,decimal_places=2, verbose_name=&quot;Starts at&quot;)
  image = models.ImageField(upload_to=path_and_rename, unique=True, blank=True, null=True, max_length=255, help_text='Please upload picture of 1:1 ratio')
  
  def __str__(self):
      return self.name
  
  class SubCategory(models.Model):
  name = models.CharField(max_length=100,blank=True,null=True)
  description = models.CharField(max_length=100,blank=True,null=True)
  price = models.DecimalField(max_digits=10,default=0.00,decimal_places=2)
  image = models.ImageField(upload_to=path_and_rename, unique=True, blank=True, null=True, max_length=255, help_text='Please upload picture of 1:1 ratio')
  service = models.ForeignKey(Service, on_delete=models.CASCADE)
  slug = AutoSlugField(populate_from=name,max_length=255, unique=True)
  on_sale = models.BooleanField(default=False, blank=True, null=True)
  discount = models.IntegerField(blank=True,null=True)
  
  def save(self, *args, **kwargs):
      if not self.slug:
          self.slug = slugify(rand_slug() + &quot;_&quot; + (self.name.split().pop(0)))
      super(SubCategory, self).save(*args, **kwargs)
  
  class Meta:
      verbose_name = &quot;Services List&quot;
      verbose_name_plural = &quot;Services Lists&quot;
      
  def __str__(self):
      return self.name
  </code></pre>
  <p>Now, how do you make a ajax request so that my subcategory option changes when I change my service field?</p>
  <p>UPDATE
  UPDATE I tried to solve jquery based on this video from 24:05 <a href="https://youtube.com/watch?v=IHh_MwEVKYM" rel="nofollow noreferrer">youtubelink</a>  my jquery script is like this. But this does not work...</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function()
      {
          var $servicevar=$(&quot;#serviceA&quot;);
              $subcategoryvar=$(&quot;#subcategoryA&quot;);
  
              $options=$subcategoryvar.find('option');
              $servicevar.on('change',function()
              {
                  $subcategoryvar.html($options.filter('[value=&quot;'+this.value+'&quot;]'));
              }).trigger('change');
      };
  </code></pre>