Node.js reload same page from html <select> tag

Question

When selecting the Category from the <select> tag, I want to update page contents with the items from this category. I have two files, one for routing and the other is the .ejs that has the select and items cards

listingRouting.js:
this will show all itemsList cards, and gives the list to listshow.ejs

router.get('/', (req, res, next) => {
    res.render('listshow', {
        title: 'pageTitle',
        itemsList: itemsListPassed,
        itemsCategories: itemsCategoriesPassed
    });
});

listshow.ejs:

There's a select option with all items categories, with value=categoryName and id=categoryId

<select name="selectedCategory" id="allCategories" class="form-select form-select-lg mb-3"
              aria-label=".form-select-lg example">
              <option class="changeToArabic" selected value="0">كل الأقسام الطبية</option>
              <% itemsCategories.forEach(item=> { %>
                <option class="changeToArabic" value="<%= item.categoryId%>">
                  <%= item.categoryName %>
                </option>
                <% }) %>
            </select>
<a href="/listshow/<%  %>" class="btn btn-primary mb-3">Get All Items</a>

• and has all itemsList cards

<% itemsList .filter(item=> item.canBeShown=== true).forEach(item => { %>
          <div class="col-lg-4 wow slideInUp" data-wow-delay="0.4s">
            <div class="team-item wow zoomIn">
              <div class="position-relative rounded-top" style="z-index: 1;">
                <img class="img-fluid rounded-top w-100" src="/images/<%= item.smallImageName %>.jpg" alt="">
                <div class="position-absolute top-100 start-50 translate-middle bg-light rounded p-2 d-flex">
                  <button class="btn btn-dark px-4" style="margin: 10px; width: 200px;">Details</button>
                </div>
              </div>
              <h4 class="mb-2">
                <%= item.itemName%>
              </h4>
            </div>
          </div>
          <% }) %>

Answer 1

You can use jQuery to assign a click event where you get the selected category ID and pass it on a URL. Then you need to have a route for listshow.

<a href="#" class="btn btn-primary mb-3" id="getAllItems">Get All Items</a>

<script>
    $("#getAllItems").click(function() {
        var categoryId = $("#allCategories").val();
        window.location.href = "/listshow/" + categoryId;
    });
</script>