Tenho um SELECT assim:
<select id="filtro-uf" name="filtro-uf" class="form-control">
<option value=" ">Selecione</option>
<option value='AC'>Acre (AC)</option>
<option value='AL'>Alagoas (AL)</option>
<option value='AP'>Amapá (AP)</option>
<option value='AM'>Amazonas (AM)</option>
<option value='BA'>Bahia (BA)</option>
<option value='CE'>Ceará (CE)</option>
<option value='DF'>Distrito Federal (DF)</option>
<option value='ES'>Espírito Santo (ES)</option>
<option value='GO'>Goiás (GO)</option>
<option value='MA'>Maranhão (MA)</option>
<option value='MT'>Mato Grosso (MT)</option>
<option value='MS'>Mato Grosso do Sul (MS)</option>
<option value='MG'>Minas Gerais (MG)</option>
<option value='PA'>Pará (PA)</option>
<option value='PB'>Paraíba (PB)</option>
<option value='PR'>Paraná (PR)</option>
<option value='PE'>Pernambuco (PE)</option>
<option value='PI'>Piauí (PI)</option>
<option value='RJ'>Rio de Janeiro (RJ)</option>
<option value='RN'>Rio Grande do Norte (RN)</option>
<option value='RS'>Rio Grande do Sul (RS)</option>
<option value='RO'>Rondônia (RO)</option>
<option value='RR'>Roraima (RR)</option>
<option value='SC'>Santa Catarina (SC)</option>
<option value='SP'>São Paulo (SP)</option>
<option value='SE'>Sergipe (SE)</option>
<option value='TO'>Tocantins (TO)</option>
</select>
E minha tabela está assim, em resumo:
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td>Razão social</td>
<td>Responsável</td>
<td>Cidade/UF</td>
</tr>
</thead>
<tbody>
<tr data-uf="SP">
<td>Razão social 01</td>
<td>Nome do responsável 01</td>
<td>São Paulo/SP</td>
</tr>
<tr data-uf="RJ">
<td>Razão social 02</td>
<td>Nome do responsável 02</td>
<td>Niterói/RJ</td>
</tr>
<tr data-uf="RS">
<td>Razão social 03</td>
<td>Nome do responsável 03</td>
<td>Porto Alegre/RS</td>
</tr>
<tr data-uf="RS">
<td>Razão social 04</td>
<td>Nome do responsável 04</td>
<td>Petolas/RS</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Gostaria de ocultar as linhas da tabela com o data-uf="UF" igual ao UF do VALUE do SELECT, ao selecionar o Estado, e quando selecionar a primeira opção que é valor " ", com label "Selecione", o Jquery desfaria as linhas ocultadas. Sei fazer com uma requisição por $.load() e $.ajax() mas está deixando o processo demorado, e pensei que dessa forma seria ágil e manipularia apenas o DOM sem requisição do back-end. Obrigado!