使用ajax，php和mysql將數據加載到下拉列表

Question

嗨我需要使用從數據庫中獲取的值填充下拉字段，並將其顯示爲選定的，並且同樣我想顯示從數據庫中提取的選項列表，

除了字段「用戶組」這一點，一切正常，這是我迄今爲止所做的，任何人都可以幫助我嗎？ 非常感謝

HTML文件

<div class="row"> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <label class="control-label">User Group 
         <span class="required"> * </span> 
         </label> 
      <select class="form-control bs-select" id="userGroup" name="userPippo"> 

         <?php 

         $select_group_query="SELECT group_id, group_name FROM user_group"; 
         $run= mysqli_query($conn, $select_group_query); 

         while($row= mysqli_fetch_array($run)) {  

          echo "<option value= '".$row['group_id']."' >" . $row['group_name'] . "</option>"; 

         } 

         ?> 

         </select> 
     </div> 
    </div> 
</div> 

JavaScript文件

function GetUserDetail(id) { 
    $("#EditUserModal").modal("show"); 
    $("#user_id").val(id); 

    var user_id = $('#user_id').val(); 

    $.ajax({ 

     url: "../controllers/ctrl_admin_user_app/ctrl_admin_get_user_details.php", 
     method: "POST", 
     data: { 
      user_id: user_id 
     }, 
     dataType: "json", 
     success: function(data) { 
      console.log(data); 
      $('#firstName').val(data.user_first); 
      $('#lastName').val(data.user_last); 
      $('#userEmail').val(data.user_email); 
      $('#userTel').val(data.user_telephone); 
      $('#userFiscalcode').val(data.user_fiscalcode); 
      $('#userBirth').val(moment(data.user_birth).format('DD/MM/YYYY')); 
      $('#userDocument').val(data.user_iddocument); 
      $('#userRole').val(data.user_role); 
      // ricarico il campo per falo funzionare con il plugin bs-select 
      $('#userRole').selectpicker('refresh'); 
      $('#userGroup').val(data.group_name); // doesn't work 
      // make it work with bs-select 
      $('#userGroup').selectpicker('refresh'); 
      doesn 't work 

      $("#EditUserModal").modal("show"); 
     } 
    }); 
} 

PHP文件

if (isset($_POST["user_id"])) { 
     $userid = $_POST['user_id']; 
     $user_id = filter_var($userid, FILTER_SANITIZE_NUMBER_INT); 

     $query = "SELECT group_id, group_name, user_first, user_last, user_email, user_telephone, user_fiscalcode, user_birth, user_iddocument, user_role FROM user_group_join LEFT JOIN (user_group, users) ON (user_group_join . group_join_id = user_group . group_id AND user_group_join . user_join_id = users . user_id) WHERE user_join_id = ? "; 

     $stmt = mysqli_prepare($conn, $query); 
     mysqli_stmt_bind_param($stmt, "i", $user_id); 
     mysqli_stmt_execute($stmt); 
     $result = mysqli_stmt_get_result($stmt); 
     $response = array(); 
     while ($row = mysqli_fetch_assoc($result)) { 
     $response = $row; 
    } 
    echo json_encode($response); 

}

Answer 1

從文檔，

.selectpicker('val'); 

可以通過調用在元件上的VAL方法設置所選擇的值。

$('.selectpicker').selectpicker('val', 'Mustard'); 
$('.selectpicker').selectpicker('val', ['Mustard','Relish']); 

這與直接在select元素上調用val（）不同。如果直接調用元素的val（），則引導選擇ui不會刷新（因爲更改事件僅從用戶交互中觸發）。你將不得不自己調用ui刷新方法。

.selectpicker('refresh'); 

要通過JavaScript以編程方式更新選擇，請首先操作選擇，然後使用刷新方法更新UI以匹配新狀態。在刪除或添加選項時，或通過JavaScript禁用/啓用選擇時，這是必需的。

$('.selectpicker').selectpicker('refresh'); 

所以，

替換這些行

$('#userGroup').val(data.group_name); // doesn't work 
// make it work with bs-select 
$('#userGroup').selectpicker('refresh'); 

這一行，

$('#userGroup').selectpicker('val', data.group_id).selectpicker('refresh');