javascript - using $.each jquery to create html select option in ajax success -

i have bootstrap modal contains form. form using lot of data database, use php them :

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

it gives me new json code :

[{ "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" }] 

this 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 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 create option based ajax response  ?              '</select>');         }     });    }); 

now, question is? how make option based ajax response using jquery. expected <option> :

<option value="response[i].no_inspection" . "> response[i].no_surat ( response[i].prefix - response[i].serial_number ) </option> 

i knew in php, loop using

foreach ($all_inspection_belum_eor $row) :    echo "<option value=" . "$row->no_inspection" . "> $row->no_surat ( $row->prefix - $row->serial_number ) </option>"; endforeach; 

for help, appreciated.

you can refer below code take idea how can append <option> dynamically a<select> box:

$(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 create 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>