0

I am inserting new rows on button click using jQuery. The row consist of textbox and dropdown menu, how can I get the data from my database to be used as an option on my dropdown menu? I tried to clone the dropdown but it's not working.

Here is my javascript code on adding new row:

$(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();
     })

});

});

Portgas D. Ace
  • 29
  • 1
  • 3
  • Assign each dropdown an unique id and then use this answer here: http://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery-javascript – rodripf Aug 03 '16 at 03:47

1 Answers1

0

I think you could get the database values first and then put it in an JS array. You could get the DB values by using ajax at the documentready

var dropdownData = [];
$.ajax("<link to the backend>").done(function(data)
{
   dropdownData = data; //this depends on what kind of data your backend sends
})

or maybe use the backend language... Suppose you're using PHP and have put the data as array

var dropdownData = [<?php echo implode(",", $dbData)?>]

Haven't test it, but I think it should work

After that, you could loop the selection dropdown options list

Sen
  • 308
  • 2
  • 13