使用 JavaScript 和 AJAX 选项创建 Select HTML
create select html with javascript and ajax options
我有这个形式简单形式
<form class="form-horizontal" method="post" action="pantalla1.php">
<div class="box-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table id="vender" class="table table-bordered table-hover">
<thead>
<tr>
<th>Nro. Slide</th>
<th>Fondo</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="slidenro[]" id="slidenro_1" value="1" class="form-control" readonly></td>
<td><select name="cbofon[]" id="cbofon_1" class="form-control select2">
</select></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
</div>
<button class="btn btn-danger delete" type="button">- Borrar</button>
<button class="btn btn-success addmore" type="button">+ Agregar Slide</button>
</div><!-- /.box-body -->
<div class="box-footer">
<button type="submit" id="btnact" name="btnact" class="btn btn-info pull-right">Actualizar</button>
</div><!-- /.box-footer -->
</form>
这是填充第一个选择的功能,它工作正常
$(function populate(){
$.ajax({
url: 'getfotos.php',
data: "",
dataType: 'json',
success: function(data){
var sel = document.getElementById('cbofon_1');
for(var i = 0; i < data.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = data[i][1];
opt.value = data[i][1];
sel.appendChild(opt);
}
},
complete: function() {
}
});
});
这是向表中添加另一行的函数
$(".addmore").on('click',function(){
var i=$('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_'+i+'" value="'+i+'" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_'+i+'" class="form-control select2"></select></td>';
html += '</tr>';
$('table').append(html);
i++;
});
但是我有一个问题,如何使用第一个选择中的 ajax 内容填充我使用 .addmore 按钮创建的每个新选择
我已经尝试了我所知道的一切,但我对javascript和ajax非常菜鸟
只需将前一个选择的 innerhtml 添加到新选择的
修改了您的添加更多点击
$(".addmore").on('click',function(){
var i=$('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_'+i+'" value="'+i+'" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_'+i+'" class="form-control select2">' + $("#cbofon_1").html() + '</select></td>';
html += '</tr>';
$('table').append(html);
i++;
});
也许这会有所帮助。
修改populate()
函数以接受元素 ID 作为参数:
function populate(id) {
id = id || 'cbofon_1'; // default value, if no id is passed in
$.ajax({
url: 'getfotos.php',
data: "",
dataType: 'json',
success: function(data){
var sel = document.getElementById(id);
// etc.
然后使用单击手柄中的参数调用该函数:
$(".addmore").on('click',function(){
var id = 'cbofon_'+i;
// ...
html += '<td><select name="cbofon[]" id="'+id+'"'
// ...
populate(id);
要实现性能,您可以先获取一次数据并将数据存储在变量中:
var fotos = [];
$.ajax({
url: 'getfotos.php',
data: "",
dataType: 'json',
success: function(data) {
fotos = data;
populateFotosSelect(1);
}
});
然后创建一个函数来填充您的选择:
function populateFotosSelect(index) {
var sel = document.getElementById('cbofon_' + index);
var opt;
for (var i = 0; i < fotos.length; i++) {
opt = document.createElement('option');
opt.innerHTML = data[i][1];
opt.value = data[i][1];
sel.appendChild(opt);
}
}
并为点击事件创建侦听器:
$(".addmore").on('click', function() {
var i = $('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_' + i + '" value="' + i + '" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_' + i + '" class="form-control select2"></select></td>';
html += '</tr>';
$('table').append(html);
populateFotosSelect(i);
i++;
});
所有代码一起:
(function() {
'use strict';
var fotos = [];
$.ajax({
url: 'getfotos.php',
data: "",
dataType: 'json',
success: function(data) {
fotos = data;
populateFotosSelect(1);
}
});
$(".addmore").on('click', function() {
var i = $('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_' + i + '" value="' + i + '" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_' + i + '" class="form-control select2"></select></td>';
html += '</tr>';
$('table').append(html);
populateFotosSelect(i);
i++;
});
function populateFotosSelect(index) {
var sel = document.getElementById('cbofon_' + index);
var opt;
for (var i = 0; i < fotos.length; i++) {
opt = document.createElement('option');
opt.innerHTML = data[i][1];
opt.value = data[i][1];
sel.appendChild(opt);
}
}
}());
相关文章:
- php使用ajax创建了select标记
- 我可以't从通过Ajax创建的select元素中设置值或获取值
- 如何填写在Modal中动态创建的Select
- 从select创建项目列表/数组
- 使用 JavaScript 和 AJAX 选项创建 Select HTML
- 使用 JSON 和 JQUERY 解析远程文件并创建动态 SELECT 控件
- 如何在默认情况下创建不带选项的select
- 如何创建接受select选项中的值的输入(类型=文本)
- 使用Javascript动态创建表,以显示数据库SELECT查询输出
- 为每个jquery创建select选项
- 从select元素创建JSON
- 如何使用Javascript动态创建SQL SELECT请求,然后使用Ajax执行
- 根据指定的数据属性创建一个包含值和文本的select下拉选项
- 如何在创建multible select元素时从getElementByID转到getElementsByClassNa
- ie9 innerHTML不能与datatable .js创建的select元素一起工作
- Dojo dijit.form.select:创建新的选择小部件后,不能更改旧小部件的选定值
- 如何处理使用javascript动态创建的select元素的onchange事件
- 从javascript while循环中创建一个select语句
- 动态创建select字段- >selected<选项没有显示
- 无法使用其选项动态创建select