Fill a div when selecting a select item (form)

Question

Colleagues.

I have a select from which the data comes from a database. See:

public function verSelect($tabela,$idTB,$nomeTB,$nomeSelect){

        $query = "SELECT * FROM ".$tabela;
       // echo $query;
        $sqlSelect = mysqli_query($this->conexao,$query);

        $select = "<select name='".$nomeSelect."' class='form-control' id='selecionar'>";
        $select .= "<option value='selecione'>Selecione</option>";    
        while($jmSelect = mysqli_fetch_object($sqlSelect)){
            $select .= "<option value='".$jmSelect->$idTB."'>".$jmSelect->$nomeTB."</option>";
        }
        $select .= "</select>";

        return $select;

    }

Cool, cool, so far so good. But I need to make sure that when selecting an item of this select, a div appears with the contents of another table that is already related. For example: Let’s assume that I choose Fernando Pessoa in this select, it would automatically appear the div with the word poet from another table.

Remember that the table already exists and is populated with information, just need the mechanics in Javascript or jquery how to do this.

Answer 1

You would need to make an ajax request for a PHP script with the information the user chooses in select!

This script will capture the value the user chooses in select:

$('#selecionar').change(function() {
    var selectedItem = $(this).val();
    // Requisição ajax
    $.ajax({
       type: "GET",
       url: "/url-para-obter-dados",
       data: {item: selectedItem},
       dataType: "json",
       success: function (response) {
           // Aqui você pode montar o outro select a partir dos dados que vierem na variável response.
           console.log(response);
       }
   });
});

Note, where it is written '/url-to-get-data', you substitute the URL that you will do the operation in the database, in PHP you will be able to access the selected item using $_GET['item']. It is important that you return the database data as a json, so use PHP json_encode.

Read more about the ajax request here: http://www.w3schools.com/jquery/ajax_ajax.asp