使用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');