javascript - 如何使用 php 中的选定值填充 Bootstrap Multiselect？

Question

我正在尝试填充 Bootstrap 多选，我使用了以下代码 html

<form>
   <tr>
      <td><label>Code Planteur :</label></td>
      <td> <input type="text" id="code_planteur" name="code_planteur" class="code_planteur"></td>
   </tr>
   <tr>
      <td><label>Numero de Ticket :</label></td>
      <td><select id="num_ticket" name="num_ticket" class="num_ticket">
          <option value="0"> numero de ticket </option>
          </select></td> 
   </tr>
</form>

和我的php文件ticket.php

<?php
    require 'conn.php';
        if($_POST['id'])
       {
            $id=$_POST['id'];
            $req="select column from table where code_planteur='".$id."' ";
            $req = $pdo->query($req);
            $results = array();
                while($row=$req->fetch())

                    {
                      $data=$row['column'];
                      echo "<option value=".$data.">".$data."</option>";
                    }

        }
?>

我的 javascript

$(document).ready(function(){
$(".code_planteur").change(function(){
     var id=$(this).val();
     var dataString = 'id='+ id;
$.ajax({
     type: "POST",
     url: "ticket.php",
     data: dataString,
     cache: false,
     success: function(html){
$(".num_ticket").html(html);
                } 
            });
    });});

我如何转换我的代码以与引导多选一起使用

示例https://jsfiddle.net/j086fkdf/

Answer 1

它适用于这个 javascript

$(document).ready(function()
{
   $(".code_planteur").change(function()
        {
             var id=$(this).val();
             var dataString = 'id='+ id;
             $.ajax({type: "POST",
                url: "ticket1.php",
                data: dataString,
                cache: false,
                dataType: "json",
                success: function(data)
                    {
                        $("#num_ticket").empty();
                        $.each(data, function (key, val) {
                        $("#num_ticket").append('<option value="' + val + '">' + val + '</option>');

                    });

                         $("#num_ticket").attr('multiple', 'multiple'); 
                         $("#num_ticket").multiselect(); 



                    } 

                }
            );
        }
    );
});

和我的ticket1.php

<?php
     require "conn.php";

        if($_POST['id']){

          $id=$_POST['id'];
          $req="select num_ticket from paiement where code_planteur='".$id."' ";
          $req = $pdo->query($req);

             while ($row=$req->fetch() ){

                 $resultat[] = $row['num_ticket'];
                } 

             echo json_encode($resultat);

        }

?>

Answer 2

修改您的表格

    <form>
   <tr>
      <td><label>Code Planteur :</label></td>
      <td> <input type="text" id="code_planteur" name="code_planteur" class="code_planteur"></td>
   </tr>
   <tr>
      <td><label>Numero de Ticket :</label></td>
      <td>
<select id="num_ticket" name="num_ticket" class="num_ticket">
          <option> numero de ticket </option>
          </select>
</td> 
   </tr>
</form>

对于您的ticket.php，我建议您使用准备查询以提高安全性

if($_POST['id']){

  $id=$_POST['id'];
  $req="select num_ticket from paiement where code_planteur=:id";
  $stmt=$pdo->prepare($req);
  $stmt->bindValue(":id",$id);
  $stmt->execute();
  $retour = $stmt->fetchAll(PDO::FETCH_ASSOC);

   foreach ($retour as $key => $value) {
    echo "<option value = '".$value['num_ticket']."'>".$value['num_ticket']."</option>\n";
}

}

和ajax查询

    $(function(){
   $("#code_planteur").change(function()
        {
             var id=$(this).val();
             var dataString = 'id='+ id;
             $.ajax({type: "POST",
                url: "ticket1.php",
                data: dataString,
                cache: false,
                dataType: "json",
                success: function(data)
                    {
                        $("#num_ticket").empty();

                        $("#num_ticket").html(data);
                    });

                         $("#num_ticket").attr('multiple', 'multiple'); 
                         $("#num_ticket").multiselect(); 
                    } 
                }
            );
        }
    );
});

Answer 3

1. 如果您希望将值填充为选中状态，则只需使用选项编写选中的标签。
2. 更多详情请参考：http ://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/