Форма запроса выбора вывода - массив

Question

Я хочу, чтобы моя форма выбора возвращала запрос, подобный этому

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

, но он возвращает

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

Какие изменения я должен внести в форму

Я попытался установить select - name="brand[]" name = "brand[0]", но он возвращает

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

элемент выбора формы находится внутри a для каждого цикла

Answer 1

Что вы можете сделать:

• создать скрытый ввод формы с именем 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"}. Вы также можете использовать вкладку Network в devtools, чтобы проверить URL, на который она была отправлена. В данном случае это: https://postman-echo.com/get?brand=nike%2Badidas%2Bwoodland, поэтому значение бренда в URL-адресе равно nike+adidas+woodland

Answer 2

Вы можете использовать JQuery следующим образом, myselect - это идентификатор тега select

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

});

Answer 3

Вы можете добавить к этому jquery, например, просто получить значения в поле выбора и объединить их, используя оператор конкатенации +. Это лучшее, что вы можете сделать. Другое решение - вы работаете на стороне сервера.