使用$.each jquery创建ajax成功的html选择选项 - using $.each jquery to create html select option in ajax success

我有一个包含表单的引导模式。这个表单将使用我数据库中的大量数据，所以我使用php来获取它们，如下所示：

public function get_view_for_inspection_report_belum_eor(){
    $q = $this->inspection->get_view_for_inspection_report_belum_eor();
    echo json_encode($q);
}

它给了我一个新的json代码，如下所示：

[{
"NO_INSPECTION": "5",
"NO_SURAT": "00005",
"DATE_OF_DESCRIPTION": "2016-01-04 21:00:37",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "3",
"VESSEL": "MV WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SURFONIC AGM 550",
"TARIFF": "0.00",
"COMMENTS": "Test Surveyor 1'r'n'r'nTest Surveyor 2"
 }, {
"NO_INSPECTION": "4",
"NO_SURAT": "00004",
"DATE_OF_DESCRIPTION": "2016-01-04 19:33:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "REVERTING",
"TARIFF": "0.00",
"COMMENTS": "Test Saja"
 }, {
"NO_INSPECTION": "3",
"NO_SURAT": "00003",
"DATE_OF_DESCRIPTION": "2016-01-04 19:26:15",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "2",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SUBASA",
"TARIFF": "0.00",
"COMMENTS": "Test surveyor 1"
 }, {
"NO_INSPECTION": "2",
"NO_SURAT": "00002",
"DATE_OF_DESCRIPTION": "2016-01-04 15:15:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "2222222",
"NAMA_CLEAN_ITEM": "TEXANOL ESTER ALKOHOL",
"TARIFF": "0.00",
"COMMENTS": "Test"
 }, {
"NO_INSPECTION": "1",
"NO_SURAT": "00001",
"DATE_OF_DESCRIPTION": "2016-01-04 19:13:07",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "1",
"VESSEL": "MV.WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "N-BUTANOL",
"TARIFF": "0.00",
"COMMENTS": "Test survey 1'r'nTest survey 2"
}]

这是我的ajax

$('#add_eir').click(function () {
    action = "TAMBAH";
    $.ajax({
        url : "<?= site_url('admin/c_admin_eir/get_view_for_inspection_report_belum_eor'); ?>",
        type : "POST",
        dataType : "json",
        success : function(response){
            $("#dynamic_no_inspection").find(':first-child').remove();
            //  CREATE A SELECT OPTION
            $("#dynamic_no_inspection").html('<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">' +
            '<option></option>' +
             // How to create an option based ajax response  ?
            '</select>');
        }
    });

 });

现在，问题是？如何使用jquery使基于选项的ajax响应。我原以为<option>是这样的：

<option value="response[i].NO_INSPECTION" . "> response[i].NO_SURAT ( response[i].PREFIX - response[i].SERIAL_NUMBER ) </option>

我知道在php中，只是使用循环

foreach ($all_inspection_belum_eor as $row) :
   echo "<option value=" . "$row->NO_INSPECTION" . "> $row->NO_SURAT ( $row->PREFIX - $row->SERIAL_NUMBER ) </option>";
endforeach;

感谢您的帮助。

您可以参考以下代码来了解如何将<option>动态附加到<select>框：

$(document).ready(function(){
  $("#dynamic_no_inspection").html('<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">' +
           '</select>');
  
  var response = [{
"NO_INSPECTION": "5",
"NO_SURAT": "00005",
"DATE_OF_DESCRIPTION": "2016-01-04 21:00:37",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "3",
"VESSEL": "MV WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SURFONIC AGM 550",
"TARIFF": "0.00",
"COMMENTS": "Test Surveyor 1'r'n'r'nTest Surveyor 2"
 }, {
"NO_INSPECTION": "4",
"NO_SURAT": "00004",
"DATE_OF_DESCRIPTION": "2016-01-04 19:33:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "REVERTING",
"TARIFF": "0.00",
"COMMENTS": "Test Saja"
 }, {
"NO_INSPECTION": "3",
"NO_SURAT": "00003",
"DATE_OF_DESCRIPTION": "2016-01-04 19:26:15",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "2",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "SUBASA",
"TARIFF": "0.00",
"COMMENTS": "Test surveyor 1"
 }, {
"NO_INSPECTION": "2",
"NO_SURAT": "00002",
"DATE_OF_DESCRIPTION": "2016-01-04 15:15:23",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": null,
"INSULATION": "3",
"VESSEL": "WAN HAI 202",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "2222222",
"NAMA_CLEAN_ITEM": "TEXANOL ESTER ALKOHOL",
"TARIFF": "0.00",
"COMMENTS": "Test"
 }, {
"NO_INSPECTION": "1",
"NO_SURAT": "00001",
"DATE_OF_DESCRIPTION": "2016-01-04 19:13:07",
"NAMA_SURVEYOR1": "surveyor",
"NAMA_SURVEYOR2": "surveyor",
"INSULATION": "1",
"VESSEL": "MV.WAN HAI 171",
"PREFIX": "EOLU",
"SERIAL_NUMBER": "1111111",
"NAMA_CLEAN_ITEM": "N-BUTANOL",
"TARIFF": "0.00",
"COMMENTS": "Test survey 1'r'nTest survey 2"
}]
  
  //code to create an options
  
  for(i=0;i<response.length;i++)
  {
    var optionValue = response[i].NO_INSPECTION;
    var optionText = response[i].NO_SURAT +' ('+ response[i].PREFIX +'-'+ response[i].SERIAL_NUMBER +')';
    
    var optionString = "<option value='"+optionValue+"'>"+optionText+"</option>";
    $("#dynamic_no_inspection select").append($(optionString));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamic_no_inspection">
</div>

$('#add_eir').click(function() {
  //get select element
  var $select = $('#no_inspection');
  //clear current options
  $select.children().remove();
  //loop through response array
  $.each(response, function() {
    //create new option and add to select
    var $opt = $('<option/>');
    $opt.val(this.NO_INSPECTION);
    $opt.text(this.NO_SURAT + '(' + this.PREFIX + '-' + this.SERIAL_NUMBER + ')');
    $select.append($opt);
  });
});

https://jsfiddle.net/qspbb4wg/

如果使用jQuery.each函数，那么这就是数组中的每个对象。将上面的代码移动到您的ajax.success处理程序中。

我会使用本机数组方法来执行任务，这样您就可以将数组缩减为一个字符串，一旦处理完成，该字符串可以在选择列表中innerHTML'd或.html'd。

var options = [{
  "NO_INSPECTION": "5",
  "NO_SURAT": "00005",
  "DATE_OF_DESCRIPTION": "2016-01-04 21:00:37",
  "NAMA_SURVEYOR1": "surveyor",
  "NAMA_SURVEYOR2": "surveyor",
  "INSULATION": "3",
  "VESSEL": "MV WAN HAI 171",
  "PREFIX": "EOLU",
  "SERIAL_NUMBER": "1111111",
  "NAMA_CLEAN_ITEM": "SURFONIC AGM 550",
  "TARIFF": "0.00",
  "COMMENTS": "Test Surveyor 1'r'n'r'nTest Surveyor 2"
}, {
  "NO_INSPECTION": "4",
  "NO_SURAT": "00004",
  "DATE_OF_DESCRIPTION": "2016-01-04 19:33:23",
  "NAMA_SURVEYOR1": "surveyor",
  "NAMA_SURVEYOR2": null,
  "INSULATION": "3",
  "VESSEL": "WAN HAI 202",
  "PREFIX": "EOLU",
  "SERIAL_NUMBER": "1111111",
  "NAMA_CLEAN_ITEM": "REVERTING",
  "TARIFF": "0.00",
  "COMMENTS": "Test Saja"
}]
// this function will loop through your option array and return a single html 
// string using the native Array.reduce method
function createOptions(options) {
  return options.reduce(function(ret, option) {
    // in here you have access to any of the option properties
    return ret + '<option value="' + option['NO_INSPECTION'] + '" . "> ( ' + option['PREFIX'] + ' - ' + option['SERIAL_NUMBER'] + ' ) </option>';
  }, '');
}
// pretend this is your ajax callback (it will happen some time in the first second of load
window.setTimeout(function(){
  
  // write the option html to the select element
  $('#dynamic_no_inspection').html(createOptions(options));
}, Math.random() * 1000 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dynamic_no_inspection">
  <option>please select</option>
</select>