title: How to update select option from Jquery Ajax successful data
body: <p>When I click the button I am getting console output correctly ; but my options are not getting updated. Please help as I new to Ajax, Jquery and Django. I spent more than a week to fix the issues. But no result.</p>
  <p>My Django code:</p>
  <pre class="lang-py prettyprint-override"><code># model
  class Post(models.Model):
      post_heading = models.CharField(max_length=200)
      post_text = models.TextField()
  
      def __str__(self):
          return self.post_heading
  
  # view
  def getmydata(request):
      # get the provinces for given country from the
      # database excluding null and blank values
  
      if request.method == &quot;GET&quot; :
         data = list(Post.objects.all().values())
         return JsonResponse({&quot;data&quot;: data})
  </code></pre>
  <p>my html template is:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div &gt;
          &lt;select name=&quot;car_maker&quot; id=&quot;car_maker&quot;&gt;
              &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
              &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
              &lt;option value=&quot;fiat&quot;&gt;Fiat&lt;/option&gt;
              &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;postacct&quot;&gt;
          &lt;p&gt;&gt;{{ acct.post_heading }}&lt;/p&gt;&gt;
          &lt;/div&gt;
  
  
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
      $('.clickme').click(function(){
          let catid;
          {#catid = $(this).attr(&quot;data-catid&quot;);#}
          catid='nil'
      $.ajax(
          {
              type: &quot;GET&quot;,
              url: &quot;/getmydata&quot;,
              data: {
                  post_id: catid,
                  'csrfmiddlewaretoken': '{{csrf_token}}'
              },
              success: function (data) {
  
                  
                  console.log(data);
                  $(&quot;#car_maker option&quot;).remove();
  
                  $.each(data.rows, function (index, item) { //jQuery way of iterating through a collection
                      $(&quot;#car_maker option&quot;).append($('&lt;option&gt;')
                          .text(item.label)
                          .attr('value', item.value));
                  })
              }
          })})
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>From ajax I getting the console output:</p>
  <pre class="lang-none prettyprint-override"><code>(index):54 
  
  {data: Array(2)}
  
  data: Array(2)s
  0: {id: 1, post_heading: &quot;2&quot;, post_text: &quot;two&quot;}
  1: {id: 2, post_heading: &quot;1&quot;, post_text: &quot;one&quot;}
  length: 2
  </code></pre>