Замена radio на select
Приветствую форумчане!
Стоит задача по работе с тильда сайтом замена radio на select в корзине т.к. список точек самовывоза 20+ штук radio кнопки смотрятся длинной портянкой! Т.к. доступа к файловой системе нет Тильда это неудобная и прекрасная CMS а всего лишь конструктор, написал следующий скрипт замены: //Код представления выпадающего списка магазинов доставки $(".t-radio__wrapper.t-radio__wrapper-delivery").wrap("<div class='Delivery'></div>"); $('.t-radio__wrapper-delivery label').wrap('<option class="item"></option>'); $(".t-input-group_dl.t-input-group_dl .Delivery .item").wrapAll("<select class='new'></select>"); SELECT реализовать получилось, но выбор как при радио при отправке формы не происходит, всегда встает только значение по умолчанию, которое выбрано в админке! Код до срабатывания скрипта (кусок): <div class="t-input-group t-input-group_dl" data-input-lid="1566467945834"> <div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70" data-redactor-toolbar="no" field="li_subtitle__1566467945834" style="">Доставка по г. Санкт-Петербург - 200 руб. (от 2000 руб. доставка бесплатная)</div> <div class="t-input-block"> <div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="Доставка курьером 200 руб. = 200" checked="checked" class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=" 200"> <div class="t-radio__indicator"></div> Доставка курьером 200 руб. </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="3. М. Ладожская ТК Заневский Каскад цокольный этаж " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 3. М. Ладожская ТК Заневский Каскад цокольный этаж </label> </div> <div class="t-input-error"></div> </div> </div> Код после срабатывания скрипта (кусок): <div class="t-input-group t-input-group_dl" data-input-lid="1566467945834"> <div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70" data-redactor-toolbar="no" field="li_subtitle__1566467945834" style="">Доставка по г. Санкт-Петербург - 200 руб. (от 2000 руб. доставка бесплатная)</div> <div class="t-input-block"> <div class="Delivery"> <div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> <select class="new"> <option class="item"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="Доставка курьером 200 руб. = 200" checked="checked" class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=" 200"> <div class="t-radio__indicator"> </div> Доставка курьером 200 руб. </label> </option> <option class="item"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"> </div> 1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат </label> </option> <option class="item"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"> </div> 2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК </label> </option> <option class="item"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="3. М. Ладожская ТК Заневский Каскад цокольный этаж " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"> </div> 3. М. Ладожская ТК Заневский Каскад цокольный этаж </label> </option> </select> </div> </div> <div class="t-input-error"></div> </div> </div> Заранее благодарю за ответ! |
Цитата:
|
Цитата:
|
banditman,
вам нужно рыть в сторону кастомизаторов селекта. обычный селект не может содержать, то что вы в него хотите в него поместить. |
Цитата:
|
Цитата:
|
banditman,
собрать все value из name="Delivery" и создать обычный <select name="Delivery"> с этими данными, заменить блок на селект. |
banditman,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('.t-input-block').replaceWith(function() { var sel = $('<select name="Delivery">'); var options = sel[0].options; $('[name="Delivery"]').each(function(i,el) { options[i] = new Option(el.value, el.value); }) return sel }) }); </script> </head> <body> <div class="t-input-group t-input-group_dl" data-input-lid="1566467945834"> <div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70" data-redactor-toolbar="no" field="li_subtitle__1566467945834" style="">Доставка по г. Санкт-Петербург - 200 руб. (от 2000 руб. доставка бесплатная)</div> <div class="t-input-block"> <div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="Доставка курьером 200 руб. = 200" checked="checked" class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=" 200"> <div class="t-radio__indicator"></div> Доставка курьером 200 руб. </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="3. М. Ладожская ТК Заневский Каскад цокольный этаж " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 3. М. Ладожская ТК Заневский Каскад цокольный этаж </label> </div> <div class="t-input-error"></div> </div> </div> </body> </html> |
Цитата:
<div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> а второй в самом radio data-delivery-price=" 200"- он есть в первом где доставка курьером в остальных где доставка бесплатна он пуст data-delivery-price="" |
banditman,
:-? |
Цитата:
|
banditman,
не понимаю с чем у вас проблемы. |
Цитата:
<div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> и data-delivery-price=" 200" |
Цитата:
|
banditman,
ау ... вариант от ванги ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var radioDiv = $('.t-input-block > .t-radio__wrapper'); radioDiv.html(function() { var sel = $('<select name="Delivery">').on('change' , function() { radioDiv.attr('data-delivery-free', this.value) }); var options = sel[0].options; $('[name="Delivery"]').each(function(i,el) { options[i] = new Option(el.value, el.dataset.deliveryPrice); }) return sel }) }); </script> </head> <body> <div class="t-input-group t-input-group_dl" data-input-lid="1566467945834"> <div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70" data-redactor-toolbar="no" field="li_subtitle__1566467945834" style="">Доставка по г. Санкт-Петербург - 200 руб. (от 2000 руб. доставка бесплатная)</div> <div class="t-input-block"> <div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000"> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="Доставка курьером 200 руб. = 200" checked="checked" class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=" 200"> <div class="t-radio__indicator"></div> Доставка курьером 200 руб. </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 1. Б.Московская 8/2 М.Владимирская маг. Великолукский мясокомбинат </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 2. 1-я Красноармейская 8-10. М.Технологический ин-т. МЕДОК </label> <label class="t-radio__control t-text t-text_xs" style=""> <input type="radio" name="Delivery" value="3. М. Ладожская ТК Заневский Каскад цокольный этаж " class="t-radio t-radio_delivery js-tilda-rule" data-tilda-req="1" data-delivery-price=""> <div class="t-radio__indicator"></div> 3. М. Ладожская ТК Заневский Каскад цокольный этаж </label> </div> <div class="t-input-error"></div> </div> </div> </body> </html> |
Цитата:
|
Часовой пояс GMT +3, время: 06:23. |