Preview information when selecting field in input

Question

I have a doubt, actually I do not know if it is possible, since I searched the net and found nothing.

I would like to know if it is possible to preview a "profile" by selecting the name of this profile in a <Option>

Type

<select id="selecao">
        <option value="perfil 1">Fulano</option>
        <option value="perfil 2">Fulanin</option>
        <option value="perfil 2">Ciclano</option>
</select>

Ai after selecting one of the names mentioned in the list open a kind of mini-card with more information of that user

Answer 1

Yes it is possible. If the information is on the server side you will need to ajax and in the select you will need to listen to the event change.

Ajax is a tool/method for communicating between the browser and the server. You can pass information to the server and ajax waits for the answer and runs a function when you receive it.

To trigger the ajax you need an Event Handler. A listener that detects when the select changes, when it makes a choice. Then, within this function you can make the ajax request.

For example:

$('#selecao').on('change', function(){
     var data = { opcao: $(this).val()};
     $.ajax({
        url: url, 
        data: data,     
        success: function(respostaServidor){                          
            $("#resposta").html(respostaServidor); // mero exemplo                  
        }           
    });   
});

Then you need the server side to listen to this request with for example (assuming that PHP is the server-side language):

$opcao = $_GET["opcao"]; // guardar os dados do ajax numa variável

// depois precisa de fazer uma query à base de dados, 
// aqui varia conforme o que tem no servidor e precisa precisar melhor na pergunta
// Depois da query à base de dados (ou ficheiro) pode retornar o valor com por exemplo:

echo $dados; // enviar resposta de volta para o lado do cliente