HTML 从 select 提交表单，但在 GET 中用逗号分隔值

Question

我有一个简单的 HTML 表单，其中有一个下拉菜单。

<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>

提交此表单后，它会重定向到 https://WEBSITE/?category[]=1&category[]=2。我如何让它重定向到 https://WEBSITE/?category=1,2

我一直在寻找一个简单的解决方案，而不是使用 jQuery 拦截表单提交，加载每个提交的值，用逗号分隔，然后使用 window.location.href 重定向。

Answer 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>

HTML 从 select 提交表单，但在 GET 中用逗号分隔值

HTML submit form from select but comma separate values in GET

html

forms

jquery

redirect

drop-down-menu