Как при изменении выпадающего списка ul одновременно изменять и список с select'ом?

Question

[Genri_Rus]

Есть вот такой вот пример: https://codepen.io/Genri_Rus/pen/rNBjjgo

<div>
  <select name="select" id="">
    <option value="">Цвет</option>
    <option value="">Красный</option>
    <option value="">Белый</option>
  </select>
</div>

<div class="dropdown">
  <span>Цвет</span>
  <i class="material-icons">arrow_drop_down</i>
  <ul>
    <li>Красный</li>
    <li>Белый</li>
  </ul>
</div>

const dropSelect = $('.dropdown span');
const dropOption = $('.dropdown ul li');

dropSelect.on('click', function() {
  $(this).siblings('ul').slideToggle('fast');  
});

dropOption.on('click', function() {
  let textOption =  $(this).text();
  $(this).parents().find('span').text(textOption);
  dropOption.parent().slideToggle('fast');
});

Собственно нужно при изменении списка ul - одновременно изменять и список с select'ом, как это сделать ?

Answer 1

[4mobile]

Comments

[Genri_Rus]

Спасибо )

А вот если у меня в option другие value, то тогда как ?

[4mobile]

при выборе можно перебирать все option и сверять текст в них с выбраным
или в LI добавить атрибуты с соответсвующими value из селекта, брать при выборе атрибут а не текст как сейчач

[Genri_Rus]

4mobile, а как сделать в первом случае ?

P.S. Нужно циклом перебирать ?

[Genri_Rus]

4mobile, а можно связать эти 2 списка ?

Допустим при переключении select менять ul и при переключение ul - менять select

P.S. Или можно через js вывести select и ul, подставив туда соответствующие переменные ?

[4mobile]

Genri_Rus, можно, циклом, можно фильтром, как умеете

[4mobile]

Допустим при переключении select менять ul и при переключение ul - менять select

Genri_Rus, слушать событие change селекта

$('select').on('change', function() {
  console.log(this.value);
});

[4mobile]

P.S. Или можно через js вывести select и ul, подставив туда соответствующие переменные ?

Genri_Rus, все можно, но мне не совсем понятно зачем

[Genri_Rus]

4mobile, спасибо огромное

все можно, но мне не совсем понятно зачем

чтобы одним разом поставить переменные в select и ul, а потом они будут меняться автоматически ?

Т.е. придется прописать 2 этих кода ?

const dropSelect = $('.dropdown span');
const dropOption = $('.dropdown ul li');

dropSelect.on('click', function() {
  $(this).siblings('ul').slideToggle('fast');  
});

dropOption.on('click', function() {
  let textOption =  $(this).text();
  $(this).parents().find('span').text(textOption);
  dropOption.parent().slideToggle('fast');
  $('select option[value="'+textOption+'"]').prop('selected', true);
});

$('select').on('change', function() {
  console.log(this.value);
 dropOption.text($(this).val());
});

[4mobile]

Genri_Rus, вероятно тут dropOption нужно поменять на dropSelect

$('select').on('change', function() {
 dropSelect.text($(this).val());
});

[Genri_Rus]

4mobile, да ошибся )

А вот если выводить из js, то нужно сначала создать объект с option'ами, потом с помощью цикла подставлять в верстку туда соответствующие значения и выводить?

[4mobile]

сформировать строку из option или li, добавить через append к родительскому элементу
https://www.electrictoolbox.com/jquery-add-option-...

[Genri_Rus]

4mobile, спасибо большое !

Answer 2

[tempick]

Ловите событие change() на select, получайте значение и устанавливайте его в ul