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

Posted 2023-05-08

【中文标题】HTML 从选择中提交表单，但在 GET 中用逗号分隔值

【英文标题】：HTML submit form from select but comma separate values in GET

【发布时间】：2021-10-16 07:11:14

【问题描述】：

我有一个带有下拉菜单的简单 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 进行重定向。

【问题讨论】：

使用$("select[name=category\[\]]").val().join(",") 获取以逗号分隔的类别列表。

【参考方案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>