Вставка данных из select через jquery

Question

У меня есть 4 div блока с select'ами.

Мне нужно, чтобы значения prefix у выбранных option из блоков с id take_1, take_2 и take_3 отрисовались в input с id prefix.

Фрагмент кода:

// Мой текущий фрагмент кода JS:
var one = $('#prefix').html();
$('select').change(function() {
  $('#prefix').html($("select option:selected").text() + '-');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-2 mb-3">
  <select class="custom-select" id="take_1">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="one">Select one</option>
    <option value="2" prefix="two">Select two</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select" id="take_2">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="lol">Select lol</option>
    <option value="2" prefix="kek">Select kek</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select" id="take_3">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="enter">Select Enter</option>
    <option value="2" prefix="backspace">Select Backspace</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="no">Select no</option>
    <option value="2" prefix="select">Select select</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <h4>Итог</h4>
  <div class="input-group">
    <div class="input-group-prepend">
      <input class="input-group-text" type="text" id="prefix" readonly>
    </div>
    <input type="text" class="form-control" id="name" placeholder="Добавьте имя">
  </div>
</div>

Что у меня не выходит:

Привязаться только к определённым ID select
Заставить брать как значение атрибут prefix (пробовал менять .text() на .attr('prefix') - проставляется только значение prefix из первого select, остальные не рисуются, при использовании .text() - отображаются все выбранные значения самого option, но не тега prefix)
Поместить полученные значения в input с id prefix, не понимаю как заставить помещать полученные значения в атрибут value.

Answer 1

Мне нужно, чтобы значения prefix у выбранных option из блоков с id take_1, take_2 и take_3 отрисовались в input с id prefix.

Предложу такой вариант...

$(_ => {
  $('.custom-select').on('change', function() {
    const o = $(this.options[this.selectedIndex])
    const val = o.attr('prefix')
    let a = $('#prefix').val()
    a = a ? a.split('-') : []
    a.push(val)
    $('#prefix').val(a.join('-'))
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-2 mb-3">
  <select class="custom-select" id="take_1">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="one">Select one</option>
    <option value="2" prefix="two">Select two</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select" id="take_2">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="lol">Select lol</option>
    <option value="2" prefix="kek">Select kek</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select" id="take_3">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="enter">Select Enter</option>
    <option value="2" prefix="backspace">Select Backspace</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <select class="custom-select">
    <option value="-1" selected style="display:none;">Выберите</option>
    <option value="1" prefix="no">Select no</option>
    <option value="2" prefix="select">Select select</option>
  </select>
</div>

<div class="mt-2 mb-3">
  <h4>Итог</h4>
  <div class="input-group">
    <div class="input-group-prepend">
      <input class="input-group-text" type="text" id="prefix" readonly>
    </div>
    <input type="text" class="form-control" id="name" placeholder="Добавьте имя">
  </div>
</div>

БЛОГ НА HUSL

Вставка данных из select через jquery

Ответы (1 шт):