Question

我遇到一个问题，我无法使用ajax中的值填充下拉列表。在我的console.log中，一切似乎都没问题，但无法理解为什么我的下拉列表没有取值。

我的观点：

<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>

这是我的剧本

<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>

我在我的控制台中重复一遍，它可以正常工作。

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

Answer 1

你打电话

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

评估为：

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

然后你打电话给

div.find('.name')

评估为：

null/undefined

因为div .name不在您搜索的div中。

尝试在所有HTML代码周围添加额外的包装器div并选择正确的元素：

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

或

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

实施例： https://jsfiddle.net/g8sua2Lt/1/

Answer 2

确保您已选择＆＃34; div＆＃34;正如您所提到的那样正确标记您正在控制台中获取数据，因此这可能是下拉列表未填充的一个原因。或者您可以尝试以下代码：

$.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(){

        }
    });

使用ajax中的值填充下拉列表

2 个答案: