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

Question

[Genri_Rus]

Вот пример
Т.к. данные выводятся с сервера (и я не могу там отредактировать верстку), то мне нужно как-то придти к такой структуре:

<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>

Answer 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);
	}
  )
}

Comments

[Genri_Rus]

Спасибо большое

[Genri_Rus]

А если в таком формате, то уже не получится так сделать ?

<div class="select-wrapper">
  <span class="title">Название</span>
  <select name="select" id="select">
      <option value="1">Первый</option>
      <option value="2">Второй</option>
      <option value="3">Третий</option>
  </select>  
</div>

[ksnk]

А что не получается ? Вроде и с такой разметкой работает

[Genri_Rus]

ksnk, вот: https://codepen.io/Genri_Rus/pen/OJPZZxM

Класс title не попадает в select-inner

[ksnk]

Найти и поставить куда надо...

...
if (sel.length>0){ // если структура уже обрамлена - сюда не попадем
  let title=$('.select-wrapper>.title');
  sel
    .wrap('<div class="select-inner"></div>' )
    .before(title)
    .after('<ul class="dropdown-select">'+
 ...

.before(title)

[Genri_Rus]

ksnk, понял, спасибо