Você pode usar addEventListener('change', ...)
e definir uma função que será chamada sempre que o select
for alterado.
Nesta função, basta pegar o valor selecionado no select
e fazer um loop nas linhas da tabela, comparando os valores com a opção escolhida.
Em seguida basta mudar a propriedade display
de cada linha com o valor table-row
quando esta deve ser mostrada, ou none
quando esta deve ser escondida.
No exemplo abaixo estou supondo que você quer comparar tanto o valor da opção selecionada (1 ou 2, no caso) quanto o respectivo texto ("A" ou "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>
No exemplo acima, caso você mude o select
para "A" ou "B", as respectivas linhas serão mostradas (e as demais escondidas). Em seguida, se você selecionar a opção "Escolher...", nenhuma linha será mostrada (exceto o cabeçalho), afinal, nenhuma das linhas da tabela corresponde a esta opção.
Caso queira que todas as linhas sejam mostradas ao selecionar a opção "Escolher..." (voltando assim ao estado inicial do select
), basta adicionar mais esta condição ao código:
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>
select
só apareça a linha "1 A" na tabela, e quando seja selecionado "B" noselect
só apareça a linha "2 B" na tabela, é isso?