Javascript 使用select下拉列表筛选php生成表的行

我有一张像这样的桌子

表行是从数据库中填充的。下面是下面的代码

<select name="tipo" id="tipoProveedor" data-col="6" class="form-control">
    <option value="todos">Todos</option>
    <?php 
        $tipo_values = array(
            'B'=>'Bienes',
            'S'=>'Servicios',
        );
        foreach($tipo_values as $value => $display_text)
        {
            $selected = ($value == $this->input->post('tipo')) ? ' selected="selected"' : "";
            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
        } 
    ?>
</select>

<table id="table" class="table table-striped">
    <thead>
        <tr>
            <th>Razón Social</th>
            <th>Dirección</th>
            <th>Contacto</th>
            <th>Teléfono Fijo</th>
            <th>Teléfono Móvil</th>
            <th>Correo Electrónico</th>
            <th>Tipo</th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <?php foreach($listaproveedor as $p){ ?>
            <tr class="<?php echo $p['tipo']; ?>">
                <td><?php echo $p['razonSocial']; ?></td>
                <td><?php echo $p['direccion']; ?></td>
                <td><?php echo $p['nombre1']; ?></td>
                <td><?php echo $p['telefonoFijo1']; ?></td>
                <td><?php echo $p['telefonoMovil1']; ?></td>
                <td><?php echo $p['correoElectronico1']; ?></td>
                <td><?php echo $p['tipo']; ?></td>
                <td>
                    <a title="Editar" href="<?php echo site_url('proveedor/edit/'.$p['id']); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a> 
                    <a title="Eliminar" href="<?php echo site_url('proveedor/remove/'.$p['id']); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

---

您可以将标识符设置为表的

，并使用javascript/jquery根据下拉列表的选定值隐藏或显示它们。谢谢您的建议。我编辑了代码，现在它可以按照我的要求工作了。

$('.familiaOcultar').addClass('collapse');
$('#tipoProveedor').change(function(){
    $('.familiaOcultar').collapse('hide');
    $('.familiaOcultar.B').hide();
    var val = $(this).val();
    if (val == "todos"){
        $('.B td').show();
        $('.S td').show();
        $('.familiaOcultar.B').hide();
    } else if (val == 'B'){
        $('.B td').show();
        $('.S td').hide();
        $('.familiaOcultar.B').show();
    } else {
        $('.B td').hide();
        $('.S td').show();
        $('.familiaOcultar.B').hide(); 
    }
});