我在使用jQuery点击按钮时插入新行。该行由文本框和下拉菜单组成,如何从我的数据库中获取数据以用作我的下拉菜单中的选项?我试图克隆下拉列表,但它无法正常工作。
以下是我添加新行的javascript代码:
$(document).ready(function() {
$('a.add').click(function(){
var newRow = $('<tr id="newRow"><td class="data"><input type="text" class="in" id="txtId' +
'"/></td><td class="data"><input type="text" class="in" id="txtFname' +
'"/></td><td class="data"><input type="text" class="in" id="txtLname' +
'"/></td><td class="data"><input type="text" class="in-email" id="txtEmail' +
'"/></td><td class="data"><input type="text" class="in" id="txtPhone' +
'"/></td><td class="data"><input type="text" class="in-date" id="txtDate' +
'"/></td><td class="data-job"><select class="in-job" id="clone_target">' +
'<option value="">--Select a Job--</option>' +
'</select></td><td class="data"><input type="text" class="in" id="txtSalary' +
'"/></td><td class="data"><input type="text" class="in" id="txtComm' +
'"/></td><td class="data"><input type="text" class="in" id="txtManager' +
'" readonly /></td><td class="data"><select class="in-dept" id="selDept' +
'"/></td><td class="data"><a class="delRow"><img id="delImg" src="/assets/images/delete.jpg"></a></td></tr>');
$('#tbl tbody').append(newRow);
$(".in-date").datepicker({
dateFormat : 'yy/mm/dd',
changeMonth : true,
yearRange : "2000:2099",
changeYear : true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
}).focus(function() {
$(".ui-datepicker-prev, .ui-datepicker-next").remove();
});
$(document).on("click", "a.delRow", function() {
var dad = $(this).parent();
$(this).closest('tr').remove();
})
});
});
答案 0 :(得分:0)
我认为您可以先获取数据库值,然后将其放入JS数组中。 您可以通过在documentready
中使用ajax来获取数据库值var dropdownData = [];
$.ajax("<link to the backend>").done(function(data)
{
dropdownData = data; //this depends on what kind of data your backend sends
})
或者可能使用后端语言...假设您正在使用PHP并将数据作为数组放置
var dropdownData = [<?php echo implode(",", $dbData)?>]
Haven没有对它进行测试,但我认为它应该可行
之后,您可以循环选择下拉选项列表