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

我能够在“警报”框中看到我的数组，但是这些值没有附加到“复选框”中。怎么做？另外，我想先删除现有的选项。

编辑：

 // From console log

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>

​