Multiselect dropdown is not working correctly with django-ajax call?

 <form method="POST" data-attributevalue-url="{% url 'vendor:ajax_load_attributes_values' %}">      <div class="d-flex ms-4">
    <div class="col-lg-8">
      
         {{ productform.attributes|as_crispy_field }} --dropdown select field

               <select  class="form-control" multiple aria-label="size 3  select example" required name="attribute_values" id="id_attribute_values">
    <option value="">----</option>
  </select>

    </div>
  </div>
 </form>

<script>
//attribute_values category filter
$("#id_attributes").change(function () {
  var url = $("#productForm").attr("data-attributevalue-url"); 
  var attributeId = $(this).val();  
  $.ajax({                      
    url: url,                    
    data: {
      'attributes': attributeId      
    },
    success: function (data) {  
      console.log("success")
        $("#id_attribute_values").html(data); 
    }
  });
 </script>


 <script type="text/javascript" src="{% static 'multiselect/dist/js/BsMultiSelect.min.js' %}"></script>
 <script type="text/javascript">
   $(document).ready(function() {
     $("#id_attribute_values").bsMultiSelect();

   });

here I want to make a dropdown that can have multiple selectable options. This will be done after the ajax call. Here I get the values to return back by ajax and also I have received values, I have seen those in the browser elements tab. But those values are not populated inside this dropdown. How to solve this? Need help

Back to Top