@Genri_Rus

Как в цикле из select сделать свой выпадающий список?

Вот пример
Т.к. данные выводятся с сервера (и я не могу там отредактировать верстку), то мне нужно как-то придти к такой структуре:
<div class="select-wrapper">
	<div class="select-inner">
		<select name="select" id="select">
		  <option value="1">Первый</option>
		  <option value="2">Второй</option>
		  <option value="3">Третий</option>
		</select>  
		<ul class="dropdown-select">
		   <input type="text" placeholder="Найти" class="search" id="dropdown-search">
		   <div class="dropdown-block">
			   <li class="dropdown-select__item">Первый</li>
			   <li class="dropdown-select__item">Второй</li>
			   <li class="dropdown-select__item">Третий</li>
		   </div>
		</ul>
	</div>
</div>
  • Вопрос задан
  • 255 просмотров
Решения вопроса 1
@ksnk
Нарисуй, какие проблемы...
let sel=$('.select-wrapper>#select');
if (sel.length>0){ // если структура уже обрамлена - сюда не попадем
  sel
    .wrap('<div class="select-inner"></div>' )
    .after('<ul class="dropdown-select">'+
       '<input type="text" placeholder="Найти" class="search" id="dropdown-search">'+
       '<div class="dropdown-block">'+
       '</div>'+
    '</ul>');
  let ddblock=$('.select-wrapper .dropdown-block');
	$('option', sel).each(function(){
		$('<li class="dropdown-select__item">'+$(this).text()+'</li>').appendTo(ddblock);
	}
  )
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы