0

Bootstrap multiselect にデータを入力しようとしています。次のコード 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/

4

3 に答える 3

0

この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);

        }

?>

于 2015-05-29T07:42:53.643 に答える
0

フォームを変更する

    <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(); 
                    } 
                }
            );
        }
    );
});
于 2015-05-29T08:52:28.877 に答える
0
  1. 値を選択したとおりに入力する場合は、選択したタグをオプションで記述します。
  2. 詳細については、http ://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/ を参照してください。
于 2015-05-29T09:22:14.490 に答える