javascript — обновить диалоговую форму jquery с соответствующим содержимым записи

У меня есть таблица пользовательских записей, и при нажатии на кнопку «Редактировать» появляется диалоговое окно jquery. Предполагается, что для редактирования каждой записи диалоговая форма заполняется значениями этой записи.
Мне удалось сохранить эти значения записей в переменных jquery, и я использую его для заполнения формы.

Он работает нормально для элементов input [= text], т. Е. Входные значения правильно заполняются соответствующими значениями записи. Но когда дело доходит до выпадающих элементов [с select2], значения из предыдущих записей сохраняются в следующей диалоговой форме.

Я попытался очистить выпадающий элемент, но результат не такой, как ожидалось.

Вот что я попробовал:

  $('a.leave_request_edit').click(function(e)
{
e.preventDefault();

var empName = $(this).closest('tr').attr('data-empName');
var reason = $(this).closest('tr').attr('data-reason').trim();
var leaveFromFormatted = $(this).closest('tr').attr('data-leaveFromFormatted').trim();
var leaveToFormatted = $(this).closest('tr').attr('data-leaveToFormatted').trim();
var leaveTypeId = $(this).closest('tr').attr('data-leaveTypeId').trim();
var userLeaveStatus = $(this).closest('tr').attr('data-leaveStatus').trim();
var empID = $(this).closest('tr').attr('data-empID').trim();
var issuedDateOld = $(this).closest('tr').attr('data-issuedDate').trim();

$('#updateMainDialog').dialog
({
resizable: false,
draggable: false,
height: 220,
width: 400,
modal: true,
buttons: {
"Edit Request" : function()
{
$(this).dialog('close');
$('#leave_modal_edit').show();

$('#leave_description_edit').val(reason);
$('#leave_date_from_edit').val(leaveFromFormatted);
$('#leave_date_to_edit').val(leaveToFormatted);
$('#leave_type_edit option[value = '+leaveTypeId+']').attr('selected', 'selected').trigger('change');

$('#request-holder').hide();
$('#dialog').dialog(
{
resizable: false,
draggable: false,
height: 430,
width: 451,
modal: true,
title: 'Leave Request By' + empName,
buttons:{
"Update Request": function(){
var id = leave_id;
var teamSelectionEdit = $('#team_selection_edit').val();
var previousLeaveStatus = userLeaveStatus;
var leaveDescriptionEdit = $('#leave_description_edit').val();
var leaveTypeEdit = $('#leave_type_edit').val();
var leaveFromEdit = $('#leave_date_from_edit').val();
var leaveToEdit = $('#leave_date_to_edit').val();
var userID = empID;
var issued_date = $('#issued_date').val();
if($('#leave_modal_edit').valid())
{
$('#request-holder').show();
$.ajax({
url: "leave/request/edit",
data:
{
id: id,
user_id: empID,
leave_type: leaveTypeEdit,
leave_type_old: leaveTypeId,
issued_date: issued_date,
issued_date_old: issuedDateOld,
leave_from: leaveFromEdit,
leave_from_old: leaveFromFormatted,
leave_to: leaveToEdit,
leave_to_old: leaveToFormatted,
team_selection: teamSelectionEdit,
leave_description: leaveDescriptionEdit,
leave_description_old: reason,
leave_status: previousLeaveStatus,
employeeName: empName,
edit: true
},
type: 'POST',
cache: false,
success: function(data, resp)
{
$('#request-holder').hide();
console.log(data);
// return;
var json = data, obj = JSON && JSON.parse(json) || $.parseJSON(json);
if(obj.status == 'error')
{
alert('error');
return false;
}
$('#updateMainDialog').dialog('close');
location.reload(true);

},
error: function(data, resp)
{
console.log(data);
}
}); // ajax
}

},
"Cancel": function()
{
// $('#team_selection_edit').select2('val','');
// $('#leave_type_edit').select2('val','');
$(this).dialog('close');
}
}
});
},
// and rest of it...

Вот как отображаются записи, если это помогает

<tr
id="<?php echo $leaveRecord['id']; ?>"data-reason = "<?php echo $leaveRecord['leave_description'];?>"data-leaveFromFormatted = "<?php echo Utility::dateFormatter($leaveRecord['leave_from']); ?>"data-leaveToFormatted = "<?php echo Utility::dateFormatter($leaveRecord['leave_to']); ?>">
<td><?php echo $leaveRecord['leave_from']; ?></td>
<td><?php echo $leaveRecord['leave_to']; ?></td>
<td><?php echo $leaveRecord['leave_description']; ?></td>
<td><?php echo $username->status; ?></td>
<td>
<a href="#" class="btn btn-danger square-btn-adjust leave_request_delete" "><i class="fa fa-trash-o"></i></a>
<a href="#" class='btn btn-primary square-btn-adjust leave_request_edit'><i class="fa fa-pencil-square-o"></i></a>
</td>
</tr>

И вот моя диалоговая форма:

<div id="dialog" style="display: none;">
<div class="col-md-12">
<form class="form-horizontal" method="post" role="form" id="leave_modal_edit">
<div class="col-md-12" id="request-holder">
<p>Processing request, please wait ...</p>
</div>
<div class="form-group">
<label for="teamselection" class="col-sm-4 control-label">Team :
</label>

<div class="col-sm-8">
<select name="team_selection" class="select2-container form-control" id="team_selection_edit">
<option></option>
<?php foreach ($Teams as $TeamNew):?>
<option value="<?php echo $TeamNew->id; ?>"><?php echo $TeamNew->title; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>

<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Leave Range :</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon" style="padding-right: 7px; padding-left:5px">From
</div>
<input type="text" placeholder="Start Date" id = "leave_date_from_edit" class="form-control dateField required" name="leave_date_from" datatype="date">
</div>
<div class="input-group">
<div class="input-group-addon" style="padding-right: 20px">To
</div>
<input type="text" placeholder="End Date"id="leave_date_to_edit" class="form-control dateField required" name="leave_date_to" datatype="date">
</div>
</div>
</div>

<div class="form-group">
<label for="leavetype" class="col-sm-4 control-label">Leave Type :</label>
<div class="col-sm-8">
<select name="leave_type" class="select2-container form-control" id="leave_type_edit">
<option></option>
<?php foreach ($LeaveTypes as $LeaveTypeNew):?>
<option value="<?php echo $LeaveTypeNew->id; ?>"><?php echo $LeaveTypeNew->title; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>

<div class="form-group">
<label for="leave_description" class="col-sm-4 control-label">Reason :</label>
<div class="col-sm-8">
<textarea rows="4" cols="40" class="form-control required" id="leave_description_edit" placeholder="Reason for the leave"></textarea>
</div>
</div>

<input type="hidden" name="issued_date" value="<?php echo $currentDate; ?>" id="issued_date">
<input type="hidden" name="edit" value="true" id="edit">

</form>
</div>

Мне нужно сохранить только те значения, которые принадлежат записи в jquery.
Это все долго и скучно … но, пожалуйста, любая помощь приветствуется .. спасибо 🙂