javascript - 使用 $.each jquery 在 ajax 成功中创建 html 选择选项

Question

我有一个包含表单的引导模式。这个表单将使用我数据库中的大量数据，所以我使用 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;

如有任何帮助，我们将不胜感激。

Answer 1

您可以引用下面的代码来了解我们如何附加 <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>