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

这与直接在选择元素上调用 val() 不同。如果直接在元素上调用 val()，bootstrap-select 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');