Trigger views exposed filter on custom select box

Question

I have this view which contains an exposed filter to filter out a simple content type listing page. The problem is about theming and keeping the view functional. I succeeded in theming the view with a select filter, as provided to me in a static html file.

The filter is select box but the theming have it's proper tags that works similar to a select box model. For example:

<!-- Basic select box in Drupal -->
<select data-drupal-selector="edit-filterone" id="edit-filterone" name="filterone" class="form-select">
  <option value="All" selected="selected">- Any -</option>
  <option value="13">term 1</option>
  <option value="15">term 2</option>
  <option value="16">term 3</option>
</select>

<!-- Our themer select box model -->
<custom-select label="Filter label" name="filterone">
  <custom-option label="- Any -" name="filterone" value="All" selected></custom-option>
  <custom-option label="term 1" name="filterone" value="13"></custom-option>
  <custom-option label="term 2" name="filterone" value="15"></custom-option>
  <custom-option label="term 3" name="filterone" value="16"></custom-option>
</custom-select>

Then the value selected get stored in a JS object.

In this view I use BEF (Better exposed forms) module and autosubmit is activated with a hidden apply button.

Using twig suggestions I can populate the select list with the filter values but there is no action trigged when I change the item.

The view is not applied and it act just like a static html. I need a way to keep the filter functional as normal.

I can get the values with js when a select list change but I don't know (or have a clue) how to send these values by ajax and alter the view and get back the results as normal views do.

My first thought is to keep the select boxes provided by drupal and just hide them from display and when the user changes value in the 'fake' select box, have them copied to the hidden one; and then just trigger the click on the (hidden) apply button.

Any suggestions please? (I don't know if my explication is that clear but I can be more specific if needed, thank you)

Answer 1

I managed to achieve that result I had thought of. Adding same filter in hidden display and just assign new values to it when the fake select box changed; then trigger the apply button. I had little problems with 'all' value because I was parsing the selected values before reassign them.