2016-08-03 2 views
0

jQuery를 사용하여 버튼 클릭시 새 행을 삽입하려고합니다. 행은 텍스트 상자와 드롭 다운 메뉴로 구성되어 있습니다. 내 데이터베이스의 데이터를 드롭 다운 메뉴의 옵션으로 사용하려면 어떻게해야합니까? 드롭 다운을 복제하려고했지만 작동하지 않습니다. 여기 jQuery를 사용하여 드롭 다운에 옵션 추가하기

는 새 행 추가에 대한 내 자바 스크립트 코드 :

$(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

할당을 할 수 각각 고유 ID를 드롭 다운 다음이 답변을 사용합니다 '는 t는 그것을 테스트,하지만 난 그게 그 후

일을해야한다고 생각 여기에 : http://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery-javascript – rodripf

답변

0

나는 데이터베이스 값을 먼저 얻은 다음 JS 배열에 넣을 수 있다고 생각한다. 당신은

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

아니면 백엔드 언어를 사용하는 documentready에서 아약스를 사용하여 DB 값을 얻을 수 ... 당신이 PHP를 사용하고 배열

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

피난처로 데이터를 입력 한 가정 당신은 루프 선택 드롭 다운 옵션 목록

+0

나는 가정한다 : 다른 언어는 다를 수 있음 – Sen

관련 문제