使用$.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>
相关文章:
- 从动态创建的html选择中选择所选选项
- 向html选择元素添加选项
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 构建HTML选择字段并使用JavaScript数组选择选项
- 当html选择/选项发生更改时,需要更新输入字段
- 使用javascript和html选择第二个选项后发出警报
- javascript函数将当前时间显示为html选择标记的预选值
- laravel5.0中HTML选择标记的动态选择
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 基于's是在HTML选择框中选择的
- 如何使用Angular 2设置HTML选择值
- 在html选择中显示AJAX成功JSON值
- 使用 jQuery 增加 HTML 选择框的大小属性
- 当我认为它不应该重新渲染视图时,如何防止 Meteor 在 html 选择 dom 单击事件上重新渲染视图
- HTML 选择元素的只读等效项
- 如何使 html 选择选项在 Meteor 中工作
- 当“不相关”的 html 选择元素没有选择任何选项时,如何退出 jQuery 事件
- HTML选择:将默认值设置为给定值,而不是从选项列表中选择
- html选择-范围为0-10
- 是否可以在HTML选择下拉菜单的每个选项上附加一个qtip2工具提示