Django Bootstrap form-select... как найти выбранное значение?

У меня есть Django приложение, использующее Bootstrap form-select. Она заполняется из таблицы следующим образом:

<div class="div-1 rounded bg-light text-dark ">
  {% trans "Active restaurant: " %}
  <select class="form-select-sm bg-light text-dark" aria-label={% trans "Select a restaurant" %} id="Selected_Restarurant">
    <option selected>{% trans "Select a restaurant" %}</option>
      {% for restaurant in restaurants %}
          <option value="restaurant.name">{{ restaurant.name }}</option>
      {% endfor %}
  </select>
</div>

Я понятия не имею, как обращаться к значению, выбранному пользователем в форме-выборе выше. Мне нужно запустить фильтр по сотруднику и обновить таблицу сотрудников в шаблоне home.html ниже, чтобы показать только сотрудников выбранного ресторана. Я знаю, что это связано с моделью и фильтрами, что также хорошо документировано, но как мне найти выбранное значение и обновить таблицу ниже на основе выбора?:

<table class="table table-sm table-hover">
    <thead class="table-success">
        <tr>
            <!--th scope="col">{% trans "Employees" %}</th-->
            <th scope="col">{% trans "Restaurant" %}</th>
            <th scope="col">{% trans "First name" %}</th>
            <th scope="col">{% trans "Last name" %}</th>
            <th scope="col">{% trans "Username" %}</th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        {% for employee in employees %}
            {% if employee.restaurant.name == "McDonalds in the bush" %}
                <tr>
                    <!--td>{{ employee.user.first_name }}</td-->
                    <td>{{ employee.restaurant.name }}</td>
                    <td>{{ employee.user.first_name }}</td>
                    <td>{{ employee.user.last_name }}</td>
                    <td>{{ employee.user.username }}</td>
                </tr>
            {% endif %}
        {% endfor %}
    </tbody>
</table>

$('#Selected_Restarurant').change(function () {
var selectedValue = $(this).val();
var restaurntList = [{% for restaurant in restaurants %}
                        '{{restaurant.name}}',
                            {%endfor%}];

// Loop through restaurantList to check if selectedValue exists
var found = false;
for (var i = 0; i < restaurantList.length; i++) { 
    if (selectedValue===restaurantList[i]) 
    { found=true; 
        break; } 
    }; 
    
    
if(found) {
    // Show the selected table row 
     $("#" + selectedValue).show(); 
     // Hide all other table rows 
     $("tr").not("#"+ selectedValue).hide(); 
    } 
else { 
    // If selectedValue is not found, show all table rows 
    $("tr").show(); 
} });

{% for employee in employees %}
        
            <tr id="{{ employee.restaurant.name }}">
                <!--td>{{ employee.user.first_name }}</td-->
                <td>{{ employee.restaurant.name }}</td>
                <td>{{ employee.user.first_name }}</td>
                <td>{{ employee.user.last_name }}</td>
                <td>{{ employee.user.username }}</td>
            </tr>
        
    {% endfor %}