Bootstrap-Select:从Mysql列获取逗号值,并在bootstrap-select中将其自动显示为选中状态

问题描述 投票:0回答:1

我正在使用Bootstrap-Select,我希望该多重下拉列表中的一些选项能够根据Mysql列中的逗号值进行检查。我找到了一个类似的问题,但没有找到解决问题的正确方法:

Bootstrap select - Get selected Value

下面是两个表,描述了我的问题:

colors_tbl

colorID | color | 
--------+-------+
   01   | Blue  |
   02   | Black |
   03   | Green |
   04   | Red   |
   05   | White |
-----------------

下面是在Color列中用逗号存储值的表。 color列是以上Colors表的外键。

cars_tbl

carID | car  | colors
------+------+------------------
  01  | BMW  | Red,Blue,Green
  02  | GM   | Red,Black,White
  03  | FORD | Green,Gray,Black
--------------------------------

基于上述信息,例如,我想从cars_tbl列(ID 03)的colors中获取颜色值,并在引导程序模态打开时在选中的Bootstrap select中显示这些值。

下面是显示所描述内容的图像:

Bootstrap-Select

以下是引导程序模态的html代码,其中显示Bootstrap-Select内部,以及一个jQuery函数,其打开模态并使用ajax结果显示数据:

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title">Edit Car</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">

    <form method="post" id="user_form" enctype="multipart/form-data">

<div class="row">

  <div class="col">
<label>Car</label>
<input type="text" name="car" id="car" class="form-control"/>
</div>

  <div class="col">
    <div class="form-group">
        <label>Colors</label>
<?php
include 'pdo_connection.php';
$stmt = $connection->prepare('SELECT * FROM colors_tbl');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>
<select class="selectpicker form-control" name="colors[]" id="colors" data-actions-box="true" multiple>

<?php foreach($results as $row): ?>    
    <option value="<?= $row['colorID']; ?>"><?= $row['color']; ?></option>  
<?php endforeach ?>

</select>

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

    </div>

    <div class="modal-footer">
    <input type="hidden" name="user_id" id="user_id" />
    <input type="hidden" name="operation" id="operation" />
    <input type="submit" name="action" id="action" class="btn btn-warning" value="" />
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>


    </div>

    </form>
    </div>

    </div>
    </div>

<script>

$(document).on('click', '.update', function(){
        var user_id = $(this).attr("id");

        $.ajax({
            url:"fetch_single.php",
            method:"POST",
            data:{user_id:user_id},
            dataType:"json",
            success:function(data)
            {

                $('#userModal').modal('show');
                $('#car').val(data.car);
                $('#colors').val(data.colors);
                $('#user_id').val(user_id);
                $('#action').val("Edit Car");
                $('#operation').val("Edit");
            }
        })
    });

</script>

和一个PHP脚本(fetch_single.php),当上面的模式打开时将获取数据:

<?php

include 'pdo_connection.php';
if(isset($_POST["user_id"]))
{
    $output = array();

    $statement = $connection->prepare(
        "SELECT * FROM cars = '".$_POST["user_id"]."' 
        LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();

    foreach($result as $row)
    {

        $output["car"] = $row["car"];
        $output["colors"] = $row['colors'];

    }
    echo json_encode($output);
}
?>

为了解决这个疑问,我尝试将以下代码放在下面的[[fetch_single脚本的变量[[$ output = array();]]]之后:$array = array($row['colors']); $colors = implode(",", $array);

并替换此行:
$output["colors"] = $row['colors'];

至此:

$output["colors"] = $color;

但是没有成功。

更新

我找到了一种Bootstrap-select用来获取值并显示在下拉列表中的方法。方法是:

$('.selectpicker').selectpicker('val', ['value 1','value 2']);

在这种情况下,我将这个selectpicker方法放入ajax成功中,我不知道如何从我的php脚本获取将JSON格式的结果发送到Ajax的color值。如果我在上面的括号内将值“ value 1”和“ value 2”替换为“ data.colors”,则在打开模式时我什么也没得到:

$.ajax({
            url:"fetch_single.php",
            method:"POST",
            data:{user_id:user_id},
            dataType:"json",
            success:function(data)
            {

                $('#userModal').modal('show');
                $('#car').val(data.car);

                $('#colors').selectpicker('val', [data.colors]);

                $('#user_id').val(user_id);
                $('#action').val("Edit Car");
                $('#operation').val("Edit");
            }
        })

我如何放置JSON格式的

颜色
值并放入选择器。('val',[])?

我正在使用Bootstrap-Select,并且我希望该多重下拉列表中的一些选项能够根据Mysql列中的逗号值进行检查。我发现了一个类似的问题,...

php json bootstrap-select bootstrap-selectpicker
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.