Как взять несколько выбранных option в select?

178

01 марта 2021, 15:30

Всем привет.

Мне нужно взять несколько значений из option для отправки на сервер а у меня получается взять только один.

С начало хотел написать вот так

let allSelect = [];
  select.onchange = e => {
    allSelect.push(select.value);
    console.log(allSelect);
}

Такой подход сохраняет все значение в массиве

Потом вот так

let allSelect = select.value;

Такой подход же сохраняет только одно значение.

Тоже не помогло

const test = document.getElementById("test"); 
const select = document.getElementById("select "); 
test.onsubmit = e => { 
  e.preventDefault(); 
  
  select.value; 
}

<form id="test"> 
  <select multiple id="select"> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
  </select> 
   
  <input type="submit" value="send" /> 
</form>

Answer 1

Вместо option.textContent советую добавить какой-нибудь data-* аттрибут на option и уже забирать значение оттуда, так надежнее

class Select { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.array = []; 
    this.send = this.node.querySelector('input[type="submit"]'); 
    this.select = this.node.querySelector('#select'); 
 
    this.onSelectClick = this.onSelectClick.bind(this); 
    this.onSendClick = this.onSendClick.bind(this); 
 
    this.select.addEventListener('click', this.onSelectClick, false); 
    this.send.addEventListener('click', this.onSendClick, false); 
  } 
 
  onSelectClick(e) { 
    const option = e.target.closest('option'); 
 
    if (!option) return; 
 
    this.pushToArray(option.textContent); 
  } 
 
  pushToArray(value) { 
    if (!this.isItemChoosen(value)) { 
      this.array.push(value); 
      console.log(this.array); 
    } 
  } 
 
  isItemChoosen(value) { 
    return ~this.array.indexOf(value); 
  } 
 
  onSendClick() { 
    // Send data 
    console.log(this.array); 
 
    // after send data 
    this.array = []; 
  } 
} 
 
new Select(document.querySelector('#test'));

<form id="test"> 
  <select multiple id="select"> 
    <option>test1</option> 
    <option>test2</option> 
    <option>test3</option> 
  </select> 
 
  <input type="submit" value="send" /> 
</form>

UPD. Либо так, выбрать данные через Ctrl

fetch('/path/to/handler', { 
    method: 'POST', 
    body: new FormData(document.querySelector('#test')) 
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

В чём разница между querySelector и getElementById?

Вопрос, возможно, слишком общий или не по теме, но мне интересноЯ видел, что кто-то использует querySelector для поиска элемента по id, а не по имени...

107

javascript