0

Estou com um desafio que para alguns pode ser coisa simples.

Em uma página tenho um combo box / menu select e uma tabela com 3 colunas.

Meu objetivo é o seguinte:

Uma vez que o usuário tenha clicado em qualquer opção do combo box / menu select a tabela abaixo ira ser povoada de acordo com os dados relacionados à opção escolhida

As opções do combo box / menu select são puxadas do banco de dados. A informação que ira aparecer na tabela também tem origem do banco de dados e tem relação com a opção escolhida no combo box, como dito anteriormente.

Alguém pode dar uma luz, por favor, de como povoar esta tabela?

Um pequeno trecho de exemplo do código:

<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>

Grande abraço!

2
  • Você quer adicionar valores conforme seleciona no select ou você quer exibir o resultado sempre que mudar o select? Commented 8/07/2019 às 18:01
  • Exibir o resultado sempre que mudar o select. Ex: X opção foi selecionada, X conteúdo aparece na tabela. Y opção foi selecionada, Y conteúdo aparece na tabela. Commented 10/07/2019 às 12:13

3 Respostas 3

1

Eu fiz uma pequena adaptação no seu problema para mostrar uma maneira de popular uma tabela a partir de valores de uma 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>

0

        $('#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>

Edite a resposta do dcalmeida e melhorei com o que você precisa, de uma olhada no código.

0

Supondo que a sua fonte de dados seja assim:

[

{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' }

]

Acredito que exemplo a seguir pode te ajudar:

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>

2
  • Prezado; É possível fazer estes parâmetros sem uma base de dados apenas por html e um arquivo simples?
    – Edivam
    Commented 4/05/2021 às 19:21
  • @Edivam, sim. Você pode criar uma página html e fazer requisições em javascript para um arquivo json contendo os parâmetros que desejar.
    – LLeon
    Commented 4/05/2021 às 20:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .