Как преобразовать select в ul?

Question

[DivineDraft]

Каким образом можно дублировать select и затем преобразовать его в ul или div для дальнейшего взаимодействия между собой?

Существует форма select для выбора опций товара, генерируется автоматически, выдается в виде:

<select class="shop-options-s " id="id-124-oval-1" onchange="shopChangeGoodsOpt('/shop/124/desc/botinki-kapika-53151t-2', 'id', '124', this)">
<option class="" value="">Выбрать</option>
<option class="0" value="15" data-o-val="0">24</option>
<option class="0" value="16" data-o-val="0">25</option>
</select>

Но все это дело нужно преобразовать в вид:
_______________________
|21|22|23|24|25|26|27|

Как, вижу это сейчас:
1) Дублируем select options в новый ul.
2) Заменяем option на li (важно сохранить все атрибуты, классы и прочее).
3) При клике в новой форме - отправляем выбор в 1 select.


1) Дублирую следующим образом:

var $options = $(".shop-options-s > option[class='0']").clone();
 $('#second').append($options);

2) ?
Можно ли как-то решить эту проблему и есть ли более лаконичный способ?
Сами option в select, могут иметь разные значения в разных товарах.

Answer 1

[Vaniljs]

<select class="select">
    <option value="1">Выбрать</option>
    <option value="2" attribute="two">2</option>
    <option value="3" attribute="three">3</option>
    <option value="4" attribute="four">4</option>
    <option value="5" attribute="five">5</option>
    <option value="6" attribute="six">6</option>
</select>
<div class="list"></div>

var select = document.getElementsByClassName('select')[0],
    options = select.getElementsByTagName('option'),
    divList = document.getElementsByClassName('list')[0];

    window.onload = () => {
        for (let i = 0; i < options.length; i++) {
            divList.innerHTML +='<div> Название option:' + options[i].innerHTML+ ' Аттрибут у option:' + options[i].getAttribute('attribute') + '</div>'
        }
    }

Comments

[DivineDraft]

Спасибо, почти то, что нужно, но можно ли как-то дополнительно передать значение value? Хотя бы в data-value? Чтобы на выходе получить:

<div class="list">
<div data-value="1">1</div>
...
</div>

[Vaniljs]

var select = document.getElementsByClassName('select')[0],
        options = select.getElementsByTagName('option'),
        divList = document.getElementsByClassName('list')[0];

    window.onload = () => {
        for (let i = 0; i < options.length; i++) {
            divList.innerHTML +='<div>' + options[i].getAttribute('data-value')+ '</div>';
        }
    }

[DivineDraft]

Name Surname, Большое спасибо.

Answer 2

[Сергей c0re]

На JQuery как-то так:

$(".shop-options-s > option[class='0']").each(function(){
  $(".container").append(
    $("<span/>").attr({"value":$(this).attr("value")})
                .css("cursor","pointer")
                .text($(this).text())
                .click(function(){
                  $(".shop-options-s").val($(this).attr("value"));
                })
  )
})

Comments

[DivineDraft]

Огромное спасибо, то что нужно!