jquery沒有追加選項從數組中選擇字段

Question

嗨，我有一個選擇框，我使用ajax來追加選項。我首先要刪除所有現有的選項，並追加數組中的新選項。但是選項沒有顯示。

我的選擇框：

<div class="btn-group"> 
    <select class="selectpicker" id="open_po_number" name="open_po_number" data-style="btn-primary"> 
    </select> 
</div> 

我的Ajax響應：

var vendor_po_list = response.vendor_po_list; 
alert(vendor_po_list); 
$('#open_po_number').find('option').remove(); 
$.each(vendor_po_list, function(i, item){ 
    $('#open_po_number').append($('<option>', { 
     value: vendor_po_list[i], 
     text: vendor_po_list[i] 
    })); 
}); 

我能看到我的陣列中的警告框，但值不附加到選擇框。這個怎麼做？ 另外我想先刪除現有的選項。

編輯：
//從控制檯登錄

vendor_po_list = ["PO-2", "PO-3", "PO-4", "PO-5", "PO-6", "PO-7", "PO-10", "PO-11"] 

完全AJAX：

$('[name="grn_vendor"]').on('change',function(){ 
    var vndor_name = $(this).val(); 
    if (vndor_name != 'none'){ 
     $.ajax({ 
      url : "/grn_qc/", 
      type : "POST", 
      data : {action:'get_po_no', 
        vndor_name:vndor_name}, 

      success : function(response){ 
       var vendor_po_list = response.vendor_po_list; 
       console.log(vendor_po_list); 
       $('#open_po_number').empty(); 
       $.each(vendor_po_list, function(i, item) { 
        $('#open_po_number').append($('<option>', { 
        value: vendor_po_list[i], 
        text: vendor_po_list[i] 
        })); 
       }); 
      }, 

      error : function(xhr,errmsg,err) { 
       console.log(xhr.status + ": " + xhr.responseText); 
      } 
      }); 
    } 
}); 

Answer 1

相反，你可以使用.empty()方法：

var vendor_po_list = ["PO-2", "PO-3", "PO-4", "PO-5", "PO-6", "PO-7", "PO-10", "PO-11"]; 
 

 
$('#open_po_number').empty(); 
 
$.each(vendor_po_list, function(i, item) { 
 
    $('#open_po_number').append($('<option>', { 
 
    value: vendor_po_list[i], 
 
    text: vendor_po_list[i] 
 
    })); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="open_po_number"> 
 
    <option>one</option> 
 
    <option>two</option> 
 
    <option>three</option> 
 
</select>