how to refresh template after ajax call - ajax

Question

I have a form that contains two select inputs one is for categories and the other for sub categories the form should work like this user should choose an option in the categories and based on that option the sub category options should be updated with new values. but for some reason the sub category options aren't updating
template dashboard.html
{% block body %}
<form>
{% csrf_token %}
<div class="row">
<div class="input-field col s6 offset-s3">
<select id="list">
<option value="" disabled selected>Choose your Category</option>
<option value="education">University/College</option>
<option value="hospital">Hospital</option>
<option value="business">Business Organizations</option>
</select>
<label>Categories</label>
</div>
<div class="input-field col s6 offset-s3">
<select>
<option value="" disabled selected>Choose your Category</option>
{% for d in data %}
<option value="">{{ d.username }}</option>
{% endfor %}
</select>
<label>Sub Categories</label>
</div>
</div>
</form>
{% endblock %}
{% block script %}
<script type="text/javascript">
$('#list').change(function() {
$.ajax({
type: 'POST',
url: '/dashboard/',
data: {
category: $('#list').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
}
});
});
</script>
{% endblock %}
view.py
from django.shortcuts import render, redirect
from django.contrib.auth.models import User
def dashboard(request):
if not request.user.is_authenticated:
return redirect('index')
else:
if request.method == 'POST':
category = request.POST['category']
#Here i am using User table because category table is empty
data = User.objects.all()
print(data)
return render(request, 'usecases/dashboard.html', {'data': data})
else:
return render(request, 'usecases/dashboard.html')

Answer 1

This is your subcategories where I just add an id #sub_categories
<select id='sub_categories'>
<option value="" disabled selected>Choose your Category</option>
{% for d in data %}
<option value="">{{ d.username }}</option>
{% endfor %}
</select>
<label>Sub Categories</label>
JS
$.ajax({
type: 'POST',
url: '/dashboard/',
data: {
category: $('#list').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function(response){
$('#sub_categories').replaceWith($("#sub_categories",response))
}
});