表单选择查询输出 - 数组答案

【问题标题】：Form select query output - array表单选择查询输出 - 数组
【发布时间】：2020-02-28 07:05:49
【问题描述】：

我希望我的选择表单返回这样的查询

http://myexamplesite.com/store/?brand=nike+adidas+woodland

但它会返回

http://myexamplesite.com/store/?brand=nike&brand=adidas&brand=woodland

我必须对表单进行什么样的更改

我尝试设置选择 - name="brand[]" name="brand[0]" 但它会返回

brand%5B0%5D=adidas&brand%5B0%5D=nike

表单选择元素在 for each 循环中

【问题讨论】：

只需在 PHP 中内爆值即可：$brands = is_array($_GET['brand']) ? implode('+', $_GET['brand']) : $_GET['brand'];
<select> 字段的名称是什么？你有一个字段还是多个字段？
@Nick，谢谢我使用 WordPress，所以我们有一个方法 get_query_var() 而不是 $_GET developer.wordpress.org/reference/functions/get_query_var
@kmoser 其多字段选择

标签： php html forms url select

【解决方案1】：

您可以将 jquery 添加到此，就像获取您的选择框的值并使用 + 连接运算符连接它们一样。这是你能做到的最好的。另一种解决方案是在服务器端执行。

【讨论】：

【解决方案2】：

你可以做什么：

创建一个名为brand的隐藏表单输入
将您的选择重命名为其他名称，例如。 brand-select
用onsubmit拦截表单提交，构造正确的字符串并将其作为值提供给brand输入
禁用brand-select 输入，使其不会发送到服务器
最后提交表单

我在codepen上做了一个简单的例子：

HTML：

<form method="get" id="form" action="https://postman-echo.com/get">
<select name="brand-select" id="brand-select" multiple>
  <option value="nike">Nike</option>
  <option value="adidas">Adidas</option>
  <option value="woodland">woodland</option>
</select>
  <input type="hidden" name="brand" id="brand">
  <input type="submit"></input>
</form>

JS：

const form = document.getElementById('form');
const brandSelector = document.getElementById('brand-select');
const brandInput = document.getElementById('brand');

form.onsubmit = (e) => {
  // prevent form from submitting
  e.preventDefault();
  const formData = new FormData(form);
  // get all selected brands from the brand selector
  // and join them with '+'
  const brands = formData.getAll('brand-select').join('+');
  brandInput.value = brands;
  // disable brand selector so it;s not included in the params
  brandSelector.disabled = true;
  // finally, submit the form
  form.submit();
};

当您在 Codepen 上提交表单时，您会看到 postman-echo 显示提交的参数："args":{"brand":"nike+adidas+woodland"}。您还可以使用 devtools 中的Network 选项卡来检查它提交到的 url。在这种情况下，它是： https://postman-echo.com/get?brand=nike%2Badidas%2Bwoodland 所以品牌的urldecoded值为nike+adidas+woodland

【讨论】：

谢谢！我在 cosole 中遇到错误说：Uncaught TypeError: Cannot set property 'onsubmit' of null
@LatheeshVMVilla 您的表单 ID 必须与 document.getElementById('form'); 中的 ID 匹配，因此请确保您的表单具有 id="form" 属性。另外，请尝试我制作的 codepen 示例，它应该可以开箱即用 :)
实际上它除了我的之外还添加了一个品牌字符串查询:( - paste.ofcode.org/tr6ZNMN6hyf3PsWhaSZAHv
@LatheeshVMVilla 您使用上面的示例错误。您必须将原始选择重命名为 brand-select，并且不会提交。我修改了你上面的代码，它现在可以工作了：paste.ofcode.org/aRY8iLj4WKderqAYWXMiJp
但它会生成一个查询字符串，例如：brand-select=8&brand-select=2&brand=

【解决方案3】：

可以这样使用JQuery，myselect是select标签的id

var qstring="http://myexamplesite.com/store/?brand=";
$("#myselect :selected").each(function(i,item)
{ 
    qstring=qstring+"+"+$(item).val(); 

});

【讨论】：