javascript - 使用相应的记录内容更新 jquery 对话框表单

Question

我有一个用户记录表，单击“编辑”按钮时会弹出一个 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 中记录的那些值。这一切又长又无聊...但是请提供任何帮助..谢谢:)

Answer 1

您可以使用 Jquery 清除下拉列表 $('#id_of_dropdown').empty();

这应该 empty下降。如果要删除特定元素，请使用 .remove方法。