'HTML submit form from select but comma separate values in GET

I have a simple HTML form that has a dropdown.

<form method="get">
    <select name="category[]" multiple class="form-control">
        <option value="1">First Value</option>
        <option value="2">Second Value</option>
        <option value="2">Third Value</option>
    </select>
    <input type="submit" value="Submit">
</form>

Upon submission of this form, it redirects to https://WEBSITE/?category[]=1&category[]=2. How do I have it redirect to https://WEBSITE/?category=1,2

I was looking for a simple solution instead of using jQuery to intercept the form submission, load in every submitted value, comma separate it, and use window.location.href to redirect.



Solution 1:[1]

<select multiple class="form-control" onclick="document.getElementById('cat').value=Object.values(this.options).filter(option=>option.selected).map(option=>option.value).join(',')">
    <option value="1">First Value</option>
    <option value="2">Second Value</option>
    <option value="3">Third Value</option>
</select>
<form method="get">
    <input id="cat" type="hidden" name="category" value="">
    <input type="submit" value="Submit">
</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nikita