Pre-visualization of information when selecting field in the input

1

I have a doubt, in fact 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>

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

    
asked by anonymous 29.05.2014 / 21:53

1 answer

5

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

Ajax is a tool / method for communicating between the browser and the server. You can pass information to the server and ajax is waiting for the response and it runs a function when it receives it.

To trigger ajax you need an event handler. An escutador 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 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
    
29.05.2014 / 22:40