Popular HTML table from a Combobox

Question

I am with a challenge that for some can be simple thing.

On one page I have a combo box / menu select and a table with 3 columns.

My goal is this:

Once the user has clicked on any option of combo box / menu select the table below will be populated according to the data related to the chosen option

The options of combo box / menu select are pulled from the database. The information that will appear in the table also originates from the database and relates to the option chosen in the combo box, as stated earlier.

Can someone shed some light, please, on how to populate this table?

A small sample snippet of the code:

<select id="especialidade">
<option>-- Escolha a Especialidade --</option>
<option>Especialidade1</option>
<option>Especialidade2</option>
<option>Especialidade3</option>
</select>

<table id="localatendimento">
<tbody>

<tr>
<th>Local</th> <!--Coluna1-->
<th>Observação</th> <!--Coluna2-->
<th>Agendamento</th> <!--Coluna3-->
</tr>

<!--Linhas que serão preenchidas de acordo com a seleção do combo box-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>

</tbody>
</table>

Big hug!

Answer 1

I made a small adaptation on your problem to show a way to popular a table from values of a combobox.

        $('#especialidade').on('change',function(){
            var option = $("#especialidade").attr('select','selected');
            var val = option.val();
            var tr = $('<tr>').append(val);
            $('#localatendimento tbody').append(tr);
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="especialidade">
            <option selected disabled>-- Escolha a Especialidade --</option>
            <option>Especialidade1</option>
            <option>Especialidade2</option>
            <option>Especialidade3</option>
            </select>
            
            <table id="localatendimento">
            <tbody>
            
            <tr>
            <th>Especialidade</th> <!--Coluna1-->
            </tr>
                       
            </tbody>
            </table>

Answer 2

        $('#especialidade').on('change',function(){
            var option = $("#especialidade").attr('select','selected');
            var val = option.val();
            
            $('#localatendimento tbody').html(val);
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="especialidade">
            <option selected disabled>-- Escolha a Especialidade --</option>
            <option>Especialidade1</option>
            <option>Especialidade2</option>
            <option>Especialidade3</option>
            </select>
            
            <table id="localatendimento">
            <tbody>
            
            <tr>
            <th>Especialidade</th> <!--Coluna1-->
            </tr>
                       
            </tbody>
            </table>

Edit dcalmeida’s response and improved with what you need, a look at the code.

Answer 3

Suppose your data source is like this:

[

{id: 1, local: 'Rua A', obs: 'xxx', agendamento: '10/10/2019' },
{id: 1, local: 'Rua Ab', obs: 'hhh', agendamento: '11/10/2019' },
{id: 1, local: 'Rua Ac', obs: 'iii', agendamento: '12/10/2019' },
{id: 2, local: 'Rua B', obs: 'ooo', agendamento: '15/10/2019' },
{id: 2, local: 'Rua Bd', obs: 'uuu', agendamento: '16/10/2019' },
{id: 3, local: 'Rua C', obs: 'ppp', agendamento: '20/10/2019' }

]

I believe that following example can help you:

const fakeData = [

{id: 1, local: 'Rua A', obs: 'xxx', agendamento: '10/10/2019' },
{id: 1, local: 'Rua Ab', obs: 'hhh', agendamento: '11/10/2019' },
{id: 1, local: 'Rua Ac', obs: 'iii', agendamento: '12/10/2019' },
{id: 2, local: 'Rua B', obs: 'ooo', agendamento: '15/10/2019' },
{id: 2, local: 'Rua Bd', obs: 'uuu', agendamento: '16/10/2019' },
{id: 3, local: 'Rua C', obs: 'ppp', agendamento: '20/10/2019' }

],

tbody = $('#localatendimento tbody');

$('#especialidade').change(ev => {

    const id = Number(ev.currentTarget.value);
    
    tbody.empty();
    
    fakeData.filter(i => i.id === id).forEach(i => {
    
          $(`<tr>
            <td>${i.local}</td>
            <td>${i.obs}</td>
            <td>${i.agendamento}</td>
          </tr>`).appendTo(tbody);
    
    });

});

td, th {border: 1px solid #eee;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="especialidade">
<option value="0">-- Escolha a Especialidade --</option>
<option value="1">Especialidade1</option>
<option value="2">Especialidade2</option>
<option value="3">Especialidade3</option>
</select>

<table id="localatendimento">
<thead>

<tr>
<th>Local</th> <!--Coluna1-->
<th>Observação</th> <!--Coluna2-->
<th>Agendamento</th> <!--Coluna3-->
</tr>

</thead>


<tbody>
<!--Linhas que serão preenchidas de acordo com a seleção do combo box-->
</tbody>
</table>