title: Populate drop down with values from ajax
body: <p>I have a issue where I can not populate drop down list with values from ajax. In my console.log everything seems to be ok, but can not figure why my drop down list doesn't take values.</p>
  
  <p>My view:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label class="control-label col-lg-12"&gt;Type &lt;span class="text-danger"&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;div class="col-lg-12"&gt;
      &lt;select rows="5" cols="5" id="productcategory" class="form-control productcategory" required="required" placeholder="Default textarea"&gt;
        &lt;option value=""&gt;Select Type&lt;/option&gt;
        &lt;option value="business"&gt;Business&lt;/option&gt;
        &lt;option value="branch"&gt;Branch&lt;/option&gt;
        &lt;option value="offer"&gt;Offer&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
    &lt;label class="control-label col-lg-12"&gt;Type &lt;span class="text-danger"&gt;*&lt;/span&gt;&lt;/label&gt;
    &lt;div class="col-lg-12"&gt;
      &lt;select class="form-control name"&gt;
        &lt;option value=""&gt;Product Name&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
    $(document).on('change', '.productcategory', function () {
      var cat_id = $(this).val();
      var div = $(this).parent();
      var op = " ";
  
      $.ajax({
        type:'get',
        url: '{!!URL::to('findProductName')!!}',
        data: { 'id': cat_id },
        success: function (data) {
          op += '&lt;option value="0" selected disabled&gt;chose product&lt;/option&gt;';
          for (var i=0; i &lt; data.length; i++) {
            console.log(data[i].id);
            console.log(data[i].name);
  
            op += '&lt;option value="' + data[i].id + '"&gt;' + data[i].name + '&lt;/option&gt;';
          }
  
          div.find('.name').html(" ");
          div.find('.name').append(op);
        },
        error: function () {}
      });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I repeat that in my console it works fine.</p>
  
  <pre><code>console.log(data[i].id);
  console.log(data[i].name);
  </code></pre>