Publicado em 19 de mar.

Inserindo <option></option> através do Ajax

Bom Dia,

	Estou com uma dificuldade para conseguir colocar os options de um select dentro do mesmo utilizando Ajax, as informações estão vindo corretas mas na hora de enviar para o HTML que eu acho que estou fazendo alguma coisa errada, estou utilizando o select2 pois tenho necessidade de colocar imagens dentro dos <option> para cada item que trouxer, segue o código utilizado a baixo:

	index.php

 <html>

 <head>

     <title>TESTE</title>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

     <script language="JavaScript" src="javascript.js"></script> <!-- Arquivo JavaScript --> 

     

     <link rel="stylesheet" href="estilo.css"/> <!-- Arquivo de Estilo CSS -->

 </head>

 <body>

	 

   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>

	 

   <select id="testeSelect">

     <span id="respSelect"></span>

   </select>

	 

 </body>

	 

 <script>

   carrega_produtos(); 

 </script>

	 

 </html>

	javascript.js

 function carrega_produtos(){

   var verifica = 'get_produto';

   $('.load').show();

    jQuery.ajax({

        type: 'POST', 

       url: './get_dados.php', 

       data: 'verifica='+ verifica, 

       cache: false, 

       success: function(response){               

           $("#respSelect").html(response);

           $('.load').hide();

       }

    });

 }

	 

 $( document ).ready(function() {

   

   function formatProduto (option) {

     if (!option.id) { 

       return option.text; 

     }

     var ob = '<img src="../../img/oculos_teste.jpg" />' + option.text;

     return ob;

   };

	 

   $("#testeSelect").select2({

     placeholder: "Selecione o Produto !",

     width: "20%",

     templateResult: formatProduto

   });

	 

 });

	 

	get_dados.php

 <?php

     include './conn_orcl.php';

	 

     $verifica = $_POST['verifica'];

	 

     if($verifica == 'get_produto' ) {

	 

         $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO

         FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT'

         ORDER BY DESCRICAO";

	 

         $parse=oci_parse($conn,$select);

         oci_execute($parse);

	 

         while ($fetch=oci_fetch_array($parse)){

             $cod = $fetch['PRODUTO'];

             $desc = $fetch['DESCRICAO'];

             $option = $option."<option>$cod - $desc</option>";

         }

         echo $option;

     }

     ob_end_flush();

     oci_free_statement($parse);

     oci_close($conn);

 ?>

	 

	As informações estão vindo corretas, mas não consigo aparecer no select

	 

	![image.png.c123e5378edfdd27689d58599706822a.png](https://forum.imasters.com.br/monthly_2021_03/image.png.c123e5378edfdd27689d58599706822a.png)

	 

	Agradeço quem poder me dar uma luz,

	Obrigado.

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

Estou com uma dificuldade para conseguir colocar os options de um select dentro do mesmo utilizando Ajax, as informações estão vindo corretas mas na hora de enviar para o HTML que eu acho que estou fazendo alguma coisa errada, estou utilizando o select2 pois tenho necessidade de colocar imagens dentro dos <option> para cada item que trouxer, segue o código utilizado a baixo: index.php <html> <head> <title>TESTE</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <script language="JavaScript" src="javascript.js"></script>  <link rel="stylesheet" href="estilo.css"/>  </head> <body> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <select id="testeSelect"> <span id="respSelect"></span> </select> </body> <script> carrega_produtos(); </script> </html> javascript.js function carrega_produtos(){ var verifica = 'get_produto'; $('.load').show(); jQuery.ajax({ type: 'POST', url: './get_dados.php', data: 'verifica='+ verifica, cache: false, success: function(response){ $("#respSelect").html(response); $('.load').hide(); } }); } $( document ).ready(function() { function formatProduto (option) { if (!option.id) { return option.text; } var ob = '<img src="../../img/oculos_teste.jpg" />' + option.text; return ob; }; $("#testeSelect").select2({ placeholder: "Selecione o Produto !", width: "20%", templateResult: formatProduto }); }); get_dados.php <?php include './conn_orcl.php'; $verifica = $_POST['verifica']; if($verifica == 'get_produto' ) { $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); while ($fetch=oci_fetch_array($parse)){ $cod = $fetch['PRODUTO']; $desc = $fetch['DESCRICAO']; $option = $option."<option>$cod - $desc</option>"; } echo $option; } ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?> As informações estão vindo corretas, mas não consigo aparecer no select ![image.png.c123e5378edfdd27689d58599706822a.png](https://forum.imasters.com.br/monthly_2021_03/image.png.c123e5378edfdd27689d58599706822a.png) Agradeço quem poder me dar uma luz, Obrigado.