@DivineDraft

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

Каким образом можно дублировать 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.
5daafddc98667015181089.jpeg

1) Дублирую следующим образом:
var $options = $(".shop-options-s > option[class='0']").clone();
 $('#second').append($options);

2) ?
Можно ли как-то решить эту проблему и есть ли более лаконичный способ?
Сами option в select, могут иметь разные значения в разных товарах.
  • Вопрос задан
  • 746 просмотров
Решения вопроса 2
Vaniljs
@Vaniljs
Ответ без оценки удаляется через 15мин (антиспам)
<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>'
        }
    }
Ответ написан
erge
@erge
Примус починяю
На 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"));
                })
  )
})


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы