Problème actualisation tableau à l'aide d'un <select>

Bonjour,

Je rencontre un problème dans la mise à jour d'un tableau en fonction d'un <select>. Je m'explique. Je souhaite en fonction de l'option que je choisis dans mon <select>, mettre à jour mon tableau en fonction de la colonne "current-use".

Je vous donne un exemple, dans mon <select> je dispose pour le moment, pour me servir de test, de 3 options : Event 1, Event 2 et Event 3. Ces 3 options représentent des évènements. Mon tableau me permet de lister tous les messages audios contenus dans ma BDD. Enfin, ma colonne "current-use" représente l'évènement pour lequel le message audio est utilisé.

C'est pourquoi lorsque (imaginons), je choisis Event 1 dans mon <select>, je souhaiterais que seulement les lignes ayant Event 1 dans la colonne, apparaissent, et que toutes les autres lignes disparaissent. De même pour Event 2, Event 3 etc ...

Voici mon code html/twig (sachant que je fais ça sous symfony) :

<form method="POST" id="form_filter" action="{{ path('oe_audio_audio_library_list') }}">
	<div class="col-md-3">
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-addon"><i class="fa fa-bullhorn"></i></span>
				{{ form_widget(form.salon, { 'attr' : {'class' : 'event_class'}}) }}
			</div>
		</div>
	</div>
</form>
					
<table id="table-audio-library" class="table table-hover table-condensed">
	<thead>
		<tr>
			<th>{{ 'name' | trans }}</th>
			<th>{{ 'languages' | trans }}</th>
			<th>{{ 'duration' | trans }}</th>
			<th>{{ 'author' | trans }}</th>
			<th>{{ 'createdAt' | trans }}</th>
			<th>{{ 'publicFile' | trans }}</th>
			<th>{{ 'currrentUse' | trans | capitalize }}</th>
			<th class="th-actions">{{ 'actions' | trans }}</th>
			{#<th style="display:none;">{{ 'id' }}</th>#}
		</tr>
	</thead>
	<tbody>
		{% for audioLibrary in audioLibraries %}
			<tr id="myTableRow" data-audio-id="{{ audioLibrary.id }}" data-audio-name="{{ audioLibrary.name }}">
				<td>{{ audioLibrary.name }}</td>
				<td>{{ macro.display_label_languages(audioLibrary.languages) }}</td>
				<td>{% if audioLibrary.length %}<span class="label label-default"><i class="fa fa-clock-o"></i>  {{ audioLibrary.length | date('H:i:s') }}</span>{% endif %}</td>
				<td>{{ audioLibrary.author }}</td>
				<td>{{ audioLibrary.createdAt | date('d-m-Y') }}</td>
				<td>
					{% if audioLibrary.isPublic %}
						<i class="fa fa-check text-success"></i>
					{% else %}
						<i class="fa fa-remove text-danger"></i>
					{% endif %}
				</td>
				<td class="cell-current-use">
					{% for event in audioLibrary.events %}
						{% if event.postendAt|date('U') > 'now'|date('U') %}
						<span class="label label-default">{{ event.name }}</span><br>
						{% else %}
						<span style="display:none;">{{ event.name }}</span><br>
						{% endif %}
					{% endfor %}
				</td>
				<td>
					{{ macro.btn_action('edit', 'oe_audio_audio_library_edit', {'audio_library_id': audioLibrary.id, 'audio_library_slug': audioLibrary.slug}) }}
					{% if hasUserAccessToRoute(app.user, 'oe_audio_audio_library_assign_events') %}
						<span class="btn btn-default btn-xs btn-flat show-form-assign-events" data-original-title="{{ 'relatedEvents' | trans | capitalize }}"><i class="fa fa-link fa-rotate-135"></i></span>
					{% endif %}
					{{ macro.btn_play_audio_library(audioLibrary.name, audioLibrary.path) }}
					{{ macro.btn_action('remove', 'oe_audio_audio_library_remove', {'audio_library_id': audioLibrary.id, 'audio_library_slug': audioLibrary.slug}) }}
				</td>
				{#{% for event in audioLibrary.events %}
				<td style="display:none;">{{ event.id }}</td>
				{% endfor %}#}
			</tr>
		{% endfor %}
	</tbody>
</table>

Voici mon code JS :

<script type="text/javascript">
// Requête pour gérer dynamiquement le tableau en fonction du Select
			$( ".event_class" ).change(function(){
				var	input_data = $('#search-table').val(), // valeur input text recherche
					select_data = $('.event_class option:selected').text(), // valeur option select
					//concat = input_data+select_data; // concaténation valeurs input + select
					
					cellules = [];
					cells_cont = 0;
					cells = $(".cell-current-use").each(function(){
								cellules[cells_cont] = $(this).text(); // recup valeur <td> colonne current_use
								cells_cont++;
							});
				var cell_data = cells.attr('class','cell-current-use').find('span').text(); // valeur cellule <td>

				console.log(cell_data);
				//console.log(cells);
				
				if ( select_data == cell_data ){
					alert('Ok !');
				}
			});
</script>	

J'attends votre aide avec impatience !!!! Merci d'avance