0

У меня на странице 3 кастомных селекта. При выборе значения в одном, меняются значения и в других.

<div class="select">
  <div class="select__title">Lesson Type</div>
  <div class="select__header">
    <span class="select__current">Choose option</span>
  </div>
  <div class="select__body">
    <div class="select__item">Choose option 1</div>
    <div class="select__item">Choose option 2</div>
    <div class="select__item">Choose option 3</div>
  </div>
</div>
$('.select > .select__header').on('click', function(e) {
  let $dropMenu = $(this).parent().find('.select__body');
  if ($dropMenu.is(':visible')) {
    $dropMenu.hide();
  } else {
    $('.select__body:visible').hide();
    $dropMenu.show();
  }

  $(document).mouseup(function(e) {
    let container = $(".select__body");
    if (container.has(e.target).length === 0) {
      container.hide();
    }
  });

  $('.select__item').on('click', function() {
    var v = $(this).text();
    $('.select__current').text(v);
  })
});

Как это исправить?

1 ответ 1

0
$('.select__current').text(v);

заменить на что-то вроде

$(this).parent().parent().find('.select__current').text(v);

только .parent().parent() надо на что-то заменить, типа closest('.select'), наверняка подобное существует - я с jquery не знаком.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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