如何在不重新加載頁面的情況下更新 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>