在JQuery AJAX请求之后删除动态下拉选项

时间:2015-07-16 18:02:35

标签: php jquery ajax html5

我有一个包含下拉框的表单。从我的数据库中使用PHP动态填充此下拉列表的选项。提交表单后,将从数据库中删除包含在下拉列表中选择的ticketId的行。我想要的是,在AJAX调用成功之后,让这个列表重新填充而不删除刚删除的行。

我的表格:

<form name="transferTicketForm" id="transferTicketForm">
    <div class='form-group'>
        <label for="ticket_number">Choose ticket:</label>
        <select name="ticket_number" id="ticket_number" class="form-control">
            <?php foreach ($assigned_tickets as $ticket): ?>
                <option value="<?php echo($ticket->ticketId); ?>"><?php echo ($ticket->ticketId . " - " . $ticket->headline); ?></option>
            <?php endforeach; ?>
         </select>
     </div>
     <div class="form-group">
         <label for="assignTo">Transfer to:</label>
         <select name="assignTo" id="assignedTo" class="form-control">
             <?php foreach($employees as $employee): ?>
                 <option value='<?php echo($employee->userId); ?>'><?php echo ($employee->firstName . " " . $employee->lastName);?></option>
              <?php endforeach; ?>
          </select>
      </div>
      <div class="form-group">
          <label for="transferComment">Comment:</label>
          <textarea name="transferComment" id="transferComment" class="form-control"></textarea>
      </div>
      <div class="text-center">
          <input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket">
      </div>
</form> 

我的Ajax电话:

$('#doTransferTicketButton').click(function(){
      $.ajax({
          type:'POST',
          url:'<?php echo site_url();?>ticket_system/transfer_and_comment_ticket',
          data:{
              'assigned': $('#assignedTo').val(),
              'comment': $('#transferComment').val(),
              'ticketId': $('#ticket_number').val()
          },
          success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#assigned').empty();
              $('#transferTicketOptions').slideToggle();
          }
      });
});

我尝试过的事情:

success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#ticket_number').empty();
              $('#transferTicketOptions').slideToggle();
          }

success: function(data){
              $target_ticket = $('#ticket_number').val();
              $('#ticket_' + $target_ticket).remove();
              $('#ticket_number')[0].reset();
              $('#transferTicketOptions').slideToggle();
          }

这些都不适用于我正在尝试做的事情。

非常感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

首先让您的AJAX文件在删除时回显票证ID。此ID将传递给success函数。并且成功运行:

    success: function(data){
        $("#ticket_number option[value=data]").remove();
      }

代码不是testet,但我认为它会起作用。