0

как выбранный select multiple option вписать в input?

Есть код:

                                    <div class="col-12 col-lg-6">
                                    <select class="js-example-basic-multiple" id="genre" multiple="multiple" name="genre[]" onchange="document.getElementById('inphid').value=value">
                                        <option value="Боевик">Боевик</option>
                                        <option value="Драма">Драма</option>
                                        <option value="Детектив">Детектив</option>
                                        <option value="Комедия">Комедия</option>
                                        <option value="Криминал">Криминал</option>
                                        <option value="Мелодрама">Мелодрама</option>
                                        <option value="Мультфильм">Мультфильм</option>
                                        <option value="На реальных событиях">На реальных событиях</option>
                                        <option value="Приключения">Приключения</option>
                                        <option value="Триллер">Триллер</option>
                                        <option value="Ужасы">Ужасы</option>
                                        <option value="Фантастика">Фантастика</option>
                                    </select>
                                </div>
                                <input id="inphid" val="" type="text" />

Как передать выбранные значения option value в Input? Передаётся только лишь одно значение, как исправить?

1
  • 1
    начните с того, чтобы перестать писать inline js код в верстке
    – teran
    7 июл 2021 в 14:22

1 ответ 1

0

document.getElementById('genre').addEventListener('change', setGenre);

function setGenre() {
  // берём все option:checked в массив ([...])
  // по массиву проходимся исп. map метод, оставляя только value каждой option
  // исп. join массив значений склеиваем в строку 
  let genres = [...this.querySelectorAll('option:checked')].map((e)=>e.value).join(", ");
  // ставим строку с жанрами в input
  document.getElementById('inphid').value = genres;
}
<div class="col-12 col-lg-6">
  <select class="js-example-basic-multiple" id="genre" multiple="multiple" name="genre[]">
    <option value="Боевик">Боевик</option>
    <option value="Драма">Драма</option>
    <option value="Детектив">Детектив</option>
    <option value="Комедия">Комедия</option>
    <option value="Криминал">Криминал</option>
    <option value="Мелодрама">Мелодрама</option>
    <option value="Мультфильм">Мультфильм</option>
    <option value="На реальных событиях">На реальных событиях</option>
    <option value="Приключения">Приключения</option>
    <option value="Триллер">Триллер</option>
    <option value="Ужасы">Ужасы</option>
    <option value="Фантастика">Фантастика</option>
  </select>
</div>
<input id="inphid" val="" type="text" />

2
  • необходимо чтобы выбирались через запятую, не по одному
    – inorviga
    7 июл 2021 в 14:44
  • всё прекрасно выбирается - и один, и два, и все сразу
    – InDevX
    7 июл 2021 в 14:45

Ваш ответ

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

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