[英]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++;
});
但是我有一個問題,我該如何填充使用.addmore按鈕創建的每個新選擇以及第一個選擇中的ajax內容
我已經嘗試了所有我知道的東西,但是我對JavaScript和Ajax十分滿意
修改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);
只需將先前選擇的內部HTML添加到新選擇的
修改了您的添加更多點擊
$(".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++;
});
也許這會有所幫助。
為了提高性能,您可以先獲取一次數據,然后將數據存儲在變量中:
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);
}
}
並為click事件創建偵聽器:
$(".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);
}
}
}());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.