HTML Multiple Select value as comma separated string in GET variable

Question

I have set up a multi-select list as follows:

<select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
</select>

This allows the user to select multiple cuisines for their search.

When the form is submitted, the URL sets multiple GET variables of the same name each with one of the selected values, like so:

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza&_sft_post_tag=seafood

I require this to pre-select tag options on the results page.

Where I am currently stuck is the structure of the URL. I require the URL to look as follows:

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza,seafood

In other words, I require one GET variable namely _sft_post_tag and all selected options must appear in a comma separated string.

The Search form is part of a Wordpress plugin called Search & Filter Pro and uses comma separated strings to pre-select options. The search form from the homepage uses the Select2 plugin.

I have tried using name="_sft_post_tag[]" and then imploding the array into a comma separated string like so implode(",", $_GET['_sft_post_tag']).

This also didn't work. At the moment it'll only pre-populate the last value of the _sft_post_tag

Solution 1

Eventually my answer was as simple as:

$('#form-specials').on('submit', function(e) {
        e.preventDefault();

        var cuisines = $('#cuisine-select').val().join(',');
        var day = $('#day-select').val();

        window.location = 'restaurant?_sft_category=' + day + "&_sft_post_tag=" + cuisines;
    });

Solution 2

This should help!

$('form').on('submit', function(e) {
  e.preventDefault()
  var val = $('#cuisine-select').val().join(',')
  var name = $('#cuisine-select').attr('name')
  $.get('/restaurant', {
      _sft_category: 'saturday',
      [name]: val
    })
    .done(function(data) {
      console.log(data)
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
  </select>
  <button type="submit">Submit</button>
</form>