Как сделать возврать значения в select2?

Question

пример

изначально выбрана барселона

меняю на гельсинки

потом нажимаю на кнопку возвратиться к прошлому значению

должна показывается барселона ( сейчас остается гельсинки)

$('.js-example-basic-single').select2({
  dropdownParent: ".list"
});

$(document).on('click', '.point__link', function() {
  $('.select2-selection__rendered').text($(this).text());
})

select {
  display: block;
  width: 100%;
}
.list .select2-container--open {
  position: static !important;
}
.list .select2-dropdown {
  position: static !important;
}

body {
  padding: 0 20px;
}

.btn.active {
  
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>

<ul class="point__list">

  <li class="point__link">Барселона</li>
<li class="point__link">Гельсинки</li>
<li class="point__link">Милан</li>
</ul>

<select class="js-example-basic-single" name="state">
  <option value="test">Барселона</option>
  <option value="WY">Гельсинки</option>
  <option value="AL">Мила</option>
</select>
<div class="list"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum blanditiis sapiente voluptas cumque architecto consequuntur ducimus reprehenderit modi non nihil repudiandae a, similique unde doloremque, voluptatem inventore praesentium! Voluptate, eligendi.</p>

<button class="btn">button</button>
<button>вернуться к прошлому выбоуа</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Answer 1

Думаю, тут много разных вариантов решения. Вот один из:

1)создать массив, в который вы будете закидывать текущий элемент и предыдущий. Условно, предыдущий всегда будем закидывать на нулевую позицию. Чтобы массив не рос до бесконечности, можно исскуственно ограничить его длину. Т.е. если < 3 то пушим в него значение, а если больше, то удаляем первое и на его место, ставим предыдущий.

Вешаем лисенер на кнопку. Находим нужный элемент в массиве и ставим его активным (selected = true)

let point__list = document.querySelectorAll('.point__link');
let select__option = document.querySelectorAll('.select__option');
let backToPrev = document.querySelector('.backToPrev')
let arr = [];
let counter = 0;


for (let p of point__list){
p.addEventListener('click', (e)=> {
counter++;
if(counter < 3){arr.push(e.target.innerText)}
else {
arr.shift();
arr.push(e.target.innerText);
}

for(let option of select__option){
if(option.innerText == e.target.innerText){
option.selected = true
}
}
})
}

backToPrev.addEventListener('click', ()=> {
for (let option of select__option){
if(option.innerText === arr[0]){
option.selected = true
}
}



})

select {
  display: block;
  width: 100%;
}
.list .select2-container--open {
  position: static !important;
}
.list .select2-dropdown {
  position: static !important;
}

body {
  padding: 0 20px;
}

.btn.active {
  
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>

<ul class="point__list">

  <li class="point__link">Барселона</li>
<li class="point__link">Гельсинки</li>
<li class="point__link">Милан</li>
</ul>

<select class="js-example-basic-single" name="state">
  <option value="test" class = 'select__option'>Барселона</option>
  <option value="WY" class = 'select__option'>Гельсинки</option>
  <option value="AL" class = 'select__option'>Милан</option>
</select>
<div class="list"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum blanditiis sapiente voluptas cumque architecto consequuntur ducimus reprehenderit modi non nihil repudiandae a, similique unde doloremque, voluptatem inventore praesentium! Voluptate, eligendi.</p>

<button class="btn">button</button>
<button class="backToPrev">вернуться к прошлому выбоуа</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

БЛОГ НА HUSL

Как сделать возврать значения в select2?

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