Javascript-форум - Замена radio на select

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Замена radio на select (https://javascript.ru/forum/jquery/79681-zamena-radio-na-select.html)

Замена 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

SELECT реализовать получилось

фантастика!

Цитата:

Сообщение от рони (Сообщение 521064)

фантастика!

???

banditman,
вам нужно рыть в сторону кастомизаторов селекта. обычный селект не может содержать, то что вы в него хотите в него поместить.

Цитата:

Сообщение от banditman

Код после срабатывания скрипта

не верьте глазам своим! :)

Цитата:

Сообщение от рони (Сообщение 521067)

Спасибо, буду смотреть, проблема усугубляется тем, что я не могу и править исходники, а это бы очень упростило процесс переделки под select

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>

Цитата:

Сообщение от рони (Сообщение 521071)

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>

Почти получилось, select появился, но он делает замену старого кода полностью, теперь я понял почему и у меня в прошлый раз не получилось моим скриптом теряется 2-ва параметра один из них div с условием от какой суммы бесплатная доставка это вот этот:

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

Цитата:

Сообщение от рони (Сообщение 521077)

banditman,
:-?

и не говорите это тильда :-E , был бы у меня доступ к файлам системы, я бы уже сто раз все поменял!

banditman,
не понимаю с чем у вас проблемы.

Цитата:

Сообщение от рони (Сообщение 521079)

banditman,
не понимаю с чем у вас проблемы.

Не понимаю как сохранить вот эти параметры при срабатывании скрипта

<div class="t-radio__wrapper t-radio__wrapper-delivery" data-delivery-variants-hook="y" data-delivery-free="2000">

data-delivery-price=" 200"

Цитата:

Сообщение от banditman

Не понимаю как сохранить вот эти параметры при срабатывании скрипта

а что должно происходить при срабатывании скрипта?

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>

Цитата:

Сообщение от рони (Сообщение 521082)

а что должно происходить при срабатывании скрипта?

это выбор доставки или самовывоз, если платная она передает параметр в основную цену, если самовывоз она не передает нечего