使用ajax的值填充下拉列表

Question

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.

My view:

<div class="form-group">
  <label class="control-label col-lg-12">Type <span class="text-danger">*</span></label>
  <div class="col-lg-12">
    <select rows="5" cols="5" id="productcategory" class="form-control productcategory" required="required" placeholder="Default textarea">
      <option value="">Select Type</option>
      <option value="business">Business</option>
      <option value="branch">Branch</option>
      <option value="offer">Offer</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-lg-12">Type <span class="text-danger">*</span></label>
  <div class="col-lg-12">
    <select class="form-control name">
      <option value="">Product Name</option>
    </select>
  </div>
</div>

This is my script

<script type="text/javascript">
$(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 += '<option value="0" selected disabled>chose product</option>';
        for (var i=0; i < data.length; i++) {
          console.log(data[i].id);
          console.log(data[i].name);

          op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
        }

        div.find('.name').html(" ");
        div.find('.name').append(op);
      },
      error: function () {}
    });
  });
});
</script>

I repeat that in my console it works fine.

console.log(data[i].id);
console.log(data[i].name);

Answer 1

You call

var div=$(this).parent();

which evaluates to:

<div class="col-lg-12">

you then call

div.find('.name')

which evaluates to:

null/undefined

because the div .name is not inside the div your searching in.

Try adding an additional wrapper div around all your HTML Code and select the correct element:

var div=$(this).parent().parent().parent(); // this is pretty bad because if you change HTML its instantly broken.

or

var div = $('.yourNewDiv'); // this is better because its more readable, and your code isn't broke if you add a div inbetween f.e.

Example: https://jsfiddle.net/g8sua2Lt/1/

Answer 2

Make sure you have selected "div" tag correctly as you have mentioned you are getting data in the console, so this might be one reason that dropdown is not populating. Or you can try the following code:

$.ajax({
        type:'get',
        url:'{!!URL::to('findProductName')!!}',
        data:{'id':cat_id},
        success:function(data){
            op+='<select class="form-control name">';
            op+='<option value="0" selected disabled>chose product</option>';
            for(var i=0;i<data.length;i++){
                console.log(data[i].id);
                console.log(data[i].name);

                op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
            }

            op+='</select>'
            div.find('.name').html(op);                
        },
        error:function(){

        }
    });