0

Подскажите как получить данные в массиве из select multiply?

<form action="#" id="carsSelection" v-if="vehicleItem">
<div class="d-flex flex-column">
  <label class="col-form-label filter-label">Выберите автомобиль</label>
<select class="form-select" aria-label="multiple select example" size='10' form="carsSelection" multiple="multiple">
  <option selected>Автомобили не выбраны</option>
  <option :value="auto.name" v-for="auto of vehicleItem" :key="auto.id">
    {{ auto.name }}</option>
</select>
</div>
<button class="btn btn-success">Сохранить выбор</button>
</form>
0

2 ответа 2

0

Через v-model, как и в любых полях формы:

<template>
    <select v-model="selectedValues" multiple>
      <option selected>Автомобили не выбраны</option>
      <option :value="auto.name" v-for="auto in vehicleItem" :key="auto.id"> {{ auto.name 
    }}</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            selectedValues: []
        }
    }
}
</script>

В selectedValues (из примера, переменнюу можете назвать как угодно) будете получать массив с выбранными значениями из values

9
  • 1
    Все насколько просто оказалось) Спасибо, а я немного намудрил) 18 мар 2022 в 17:06
  • Uncaught SyntaxError: Unexpected token 'export'
    – Опан
    18 мар 2022 в 20:01
  • @Опан И что Вы этим хотите сказать? Вы вообще писали что-то на Vue? 18 мар 2022 в 20:34
  • Я подключил Vue, ошибка осталась.
    – Опан
    18 мар 2022 в 21:33
  • @Опан В ответе приведен конструктор компонента (классический вариант, без setup). Он не запускается просто так, поскольку компилируется через Webpack. Автор вопроса понял, что нужно делать. Если у Вас есть вопрос, как использовать Vue – прочтите документацию или задайте отдельный вопрос. 19 мар 2022 в 7:34
0

Добавляем такой JS-код:

var myselect = document.querySelector('select');
document.querySelector('button').onclick = function(){
    var values = [];
     // перебираем массив опций
    for(var i = 0; i < myselect.options.length; i ++) if(myselect.options[i].selected) values.push(myselect.options[i].value); // если опция выбрана - добавим её в массив
    console.log(values);
}

1
  • Плохой вариант. Зачем костылить что-то на ванильном JS, если используется фреймворк, в основе которого есть работа с такими задачами? При чём приведенный код не реактивен. 18 мар 2022 в 12:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.