Добавление параметров в раскрывающийся список с помощью jQuery

Question

Я вставляю новые строки при нажатии кнопки с помощью 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(); 
    }) 

}); 

});

Answer 1

Я думаю, вы могли сначала получить значения базы данных, а затем поместить их в массив JS. Вы можете получить значения БД с помощью Ajax на documentready

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 «т проверить это, но я думаю, что он должен работать

После этого, вы могли бы петлей списка выбора опций выпадающих