如何在不重新加载页面的情况下更新 select 选项值（模态）

Question

在提交引导模式中的数据并且该数据进入 select 标记后，我正在尝试更新 select 标记选项值。 但问题是我们必须重新加载页面才能在选项标签中显示那些提交的值

Select 标签

$user_id = $_SESSION['user_id'];
$select_customer = "select * from customer where user_id='$user_id'";
$select_customer_query = mysqli_query($connection,$select_customer);

          <div class="form-group">
          <select class="form-control form-control-chosen add-customer-tag" id="invoice_customer_name" name="invoice_customer_name">
          <option disabled selected>Customer Name</option>  
          <?php if(mysqli_num_rows($select_customer_query)>0){
          while($customer_result = mysqli_fetch_assoc($select_customer_query)) { ?>
          <option><?php echo $customer_result['customer_name']; ?></option>
          <?php }} ?>
          <option value="add-new-customer">Add New Customer</option>
          </select>
          </div>

引导模式

         <div id="add-customer-modal" class="modal fade add-customer-modal" role="dialog">
         <div class="modal-dialog">
         <div class="modal-content">
         <div class="modal-header">
         <h4 class="modal-title">Add New Customer</h4>
         </div>
         <div class="modal-body">
         <div class="form-group">
         <input type="text" class="form-control" id="customer_name_modal" name="customer_name_modal" placeholder="Customer Name"> 
         </div>
         </div>
         <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary" data-dismiss="modal" id="add-customer-modal-btn">Save</button>
         <div class="error_message"></div>
         </div>
         </div>
         </div>
         </div>

jQuery代码

   $('#add-customer-modal-btn').on('click',function(){
      var customer_name_modal = $('#customer_name_modal').val();
      $.ajax({
          url: 'includes/add-customer-modal.inc.php',
          type: 'POST',
          data: {customer_name_modal:customer_name_modal},
          success: function(add_customer_modal_result){
            $('.error_message').html(add_customer_modal_result);
          } 
      });
   });

add-customer-modal.inc.php 文件

<?php 

session_start();

include 'db-connection.php';

   

   $user_id = $_SESSION['user_id'];
   $customer_name = mysqli_real_escape_string($connection, $_POST['customer_name_modal']);
   
   if(empty($customer_name)){
       
       echo "<span class='alert alert-danger'>Customer name cannot be blank</span>";
       
   } else {
       
   $insert_customer = "insert into customer(user_id,customer_name) values('$user_id','$customer_name')";

   $inser_customer_query = mysqli_query($connection,$insert_customer) or die(mysqli_error($connection));

   if($inser_customer_query){
       echo "<span class='alert alert-success'>Customer has been added</span>";
   }
   }


?>

我知道代码容易受到 SQL 注入的影响。 这仅用于测试目的，因此您可以忽略它。

通过引导模式添加客户名称后，它将插入 select 标记中，但仅在重新加载页面后才会反映

Answer 1

正如我在评论中所说，如果值已成功插入到数据库中，您可以简单地在选择框中插入新选项。

这是工作代码：

 $(".add-customer-tag").chosen() $('#add-customer-modal-btn').on('click', function() { var customer_name_modal = $('#customer_name_modal').val(); /* $.ajax({ url: 'includes/add-customer-modal.inc.php', type: 'POST', data: {customer_name_modal:customer_name_modal}, success: function(add_customer_modal_result=){*/ //suppose this return add_customer_modal_result = "<span class='alert alert-success'>Customer has been added</span>" $('.error_message').html(add_customer_modal_result); //check if success class is there if ($(add_customer_modal_result).hasClass("alert-success")) { $("#invoice_customer_name").append("<option>" + customer_name_modal + "</option") //good insert.. $("#invoice_customer_name").trigger("chosen:updated");//added this line } /* } });*/ }); $(".add-customer-tag").on("change", function() { if ($(this).val() == "add-new-customer") { $("#add-customer-modal").modal("show") } })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script> <div class="form-group"> <select class="form-control form-control-chosen add-customer-tag" id="invoice_customer_name" name="invoice_customer_name"> <option disabled selected>Customer Name</option> <option> Abc </option> <option value="add-new-customer">Add New Customer</option> </select> </div> <div id="add-customer-modal" class="modal fade add-customer-modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add New Customer</h4> </div> <div class="modal-body"> <div class="form-group"> <input type="text" class="form-control" id="customer_name_modal" name="customer_name_modal" placeholder="Customer Name"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal" id="add-customer-modal-btn">Save</button> <div class="error_message"></div> </div> </div> </div> </div>