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

我有一個問題，我無法使用ajax中的值填充下拉列表。在我的console.log中，一切似乎都沒有問題，但無法確定爲什麼我的下拉列表中沒有值。使用ajax中的值填充下拉列表

我的觀點：

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

來源

2017-04-27 User154584

你會喜歡做'的console.log（OP）'＆檢查 – brk

就可以打印傳入的JSON數據的格式一次？ – mi6crazyheart

@brk它顯示了我想要在控制檯中的方式，但下拉菜單仍然不工作 – User154584

你叫

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/

來源

2017-04-27 10:00:37 Xatenev

請確保您已正確選擇「div」標記，因爲您提到您在控制檯中獲取數據，所以這可能是下拉未填充的原因之一。或者你可以嘗試下面的代碼：

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

     } 
    });

來源

2017-04-27 10:18:10

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

回答

相關問題