Display only option marked in select in JS

Asked

Viewed 109 times

1

I have a table with several entries, I would like to select a type of data and appear only those selected data.

<select>
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table>
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
    <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>

javascript

  • You want that when it is selected "A" in the select only row "1 A" appears in the table, and when "B" is selected in the select only row "2 B" appears in the table, that’s it?

  • @Pedrogaspar exactly that, but in my project will have several lines.

  • But you want to build the table dynamically only with the data referring to the value that was selected, or all the data will already be in the table and you just want to show the lines that matter and hide the ones that don’t matter?

  • @Pedrogaspar to show only the lines that matter and hide the others.

1 answer

7


You can use addEventListener('change', ...) and define a function that will be called whenever the select is amended.

In this function, just take the selected value in the select and loop the rows of the table, comparing the values with the chosen option.

Then just change the property display of each line with the value table-row when it must be shown, or none when it must be hidden.

In the example below I am assuming you want to compare both the value of the selected option (1 or 2 in the case) and the respective text ("A" or "B").

document.querySelector('#opcoes')
  .addEventListener('change', // quando o select for alterado, chamar a função abaixo
    function() {
      // opção selecionada
      let opcao = this.options[this.selectedIndex];

      // verificar as células da tabela que possuem o valor selecionado
      let tabela = document.querySelector('#tabela');
      // começar em 1 para ignorar a primeira linha (cabeçalhos estão na linha zero)
      for (let i = 1, row; row = tabela.rows[i]; i++) {
        let valor = row.cells[0].innerHTML; // neste exemplo, valor é 1 ou 2
        let texto = row.cells[1].innerHTML; // "A" ou "B"
        if (opcao.value === valor && opcao.text === texto) {
          row.style.display = 'table-row';
        } else {
          row.style.display = 'none';
        }
      }
    }
  )
<select id="opcoes">
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table id="tabela">
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>

In the example above, if you change the select for "A" or "B", the respective lines will be shown (and the other hidden ones). Then, if you select the "Choose..." option, no row will be shown (except the header), after all, none of the table rows matches this option.

If you want all lines to be shown when selecting the "Choose..." option (thus returning to the initial state of the select), just add this condition to the code:

document.querySelector('#opcoes')
  .addEventListener('change', // quando o select for alterado, chamar a função abaixo
    function() {
      // opção selecionada
      let opcao = this.options[this.selectedIndex];
      // opção selecionada é "Escolher...", mostrar todas as linhas
      let mostrarTodos = this.selectedIndex == 0;

      // verificar as células da tabela que possuem o valor selecionado
      let tabela = document.querySelector('#tabela');
      // começar em 1 para ignorar a primeira linha (cabeçalhos estão na linha zero)
      for (let i = 1, row; row = tabela.rows[i]; i++) {
        let valor = row.cells[0].innerHTML; // neste exemplo, valor é 1 ou 2
        let texto = row.cells[1].innerHTML; // "A" ou "B"
        if ((opcao.value === valor && opcao.text === texto)
            || mostrarTodos) {
          // opção selecionada é igual a linha, ou é a opção "Escolher..."
          row.style.display = 'table-row';
        } else {
          row.style.display = 'none';
        }
      }
    }
  )
<select id="opcoes">
    <option selected>Escolher...</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

<table id="tabela">
  <tr>
    <th>id</th>
    <th>categoria</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
  </tr>
</table>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.