单击后用选项/选择替换UL / LI

Question

我试图在单击上一个列表后将ul / li列表转换为select。非常感谢你

(function() {
  if (
    jQuery('.m-form-row__content').eq(2).click()
  ) {
    jQuery('.m-form-row__content').eq(3).insertAfter($('.dropdownContent'));
    jQuery('.dropdownContent .m-radio-group--4').insertAfter(jQuery('.dropdown'));

    (function() {
      var $list = $('.m-radio-group--4'),
        $select = $('<select />');

      $list.children('li.m-item--text').each(function(index) {
        $select.append($('<option />').attr('value', index).html($(this).html()));
      });

      $list.eq(1).replaceWith($select);
      jQuery($('select')).addClass('select-dropdown');
      jQuery('.select-dropdown').after(jQuery('<span class=\"a-dropdown__ui\"></span>'));
      jQuery('.select-dropdown').css({
        'padding': '.75em 1.25em',
        'width': '100%',
        'border': '1px solid #aaa',
        'min-height': '3.125em',
      })

      jQuery('.select-dropdown SPAN').addClass('newSpan');
      jQuery('.newSpan').css({
        'margin-left': '-30px'
      });
    });
  }
});

这里是HTML：

<div _ngcontent-c2="" class="m-form-row__content">
<ul _ngcontent-c2="" class="m-radio-group m-radio-group--pictorial m-radio-group--4 m-radio-group--segmented m-radio-group--custom">
    <!----><li _ngcontent-c2="" class="m-radio-group__item m-item__start m-item--picto">
        <input _ngcontent-c2="" class="a-radio__input ng-valid ng-dirty ng-touched" type="radio" id="func:http://ontologies.aviva.fr/application.swd?1=PGh0dHA6Ly93d3cub2Rhc2Uub3JnL29udG9sb2dpZXMvdWkvcXVlc3Rpb24ub3dsI1F1ZXN0aW9uPg..&amp;2=PHVybjp1dWlkOjIyNDgxOTllLTYxYjYtNDdhMi05MWEwLTM5MzVkOWRlMmE3NT4.&amp;3=PGh0dHA6Ly93d3cuYXZpdmEuZnIvb250b2xvZ2llcy9hdXRvLWRpcmVjdC9hdXRvLm93bCNtYXJxdWVVc3VlbGxlPg..#F_0">

        <label _ngcontent-c2="" class="a-radio" for="RE">
            <span _ngcontent-c2="" class="a-radio__label m-item--picto__RE">
                <span _ngcontent-c2="" class="a-radio__label-inner">RENAULT</span>
            </span>
        </label>
    </li>
</ul>
</div>


<div _ngcontent-c2="" class="m-form-row__content">
<ul _ngcontent-c2="" class="m-radio-group m-radio-group--pictorial m- 
     radio-group--4 m-radio-group--segmented m-radio-group--custom">
     <li _ngcontent-c2="" class="m-radio-group__item m-item__start m- 
     item--text">
     <input _ngcontent-c2="" class="a-radio__input ng-dirty ng-valid 
     ng-touched" type="radio">

      <label _ngcontent-c2="" class="a-radio" for="98">
        <span _ngcontent-c2="" class="a-radio__label ">
            <span _ngcontent-c2="" class="a-radio__label- 
         inner">ALASKAN</span>
        </span>
      </label>
    </li>
  </ul>
  </div>

Answer 1

好吧，我可能会找到答案，但是问题是，当我在下拉菜单中选择一个选项时，似乎没有提交所选的选项...

这是我使用的代码（HTML与以前的代码相同：

jQuery(function() {
if (
jQuery('.m-form-row__content').eq(2).click()
) {
  jQuery('.m-form-row__content').eq(3).insertAfter($('.dropdownContent'));
        jQuery('.dropdownContent .m-radio-group--4').insertAfter(jQuery('.dropdown'));
        setInterval(function() {
                var $list   = $('.m-radio-group--4'),
                $select = $('<select />');
                $list.children('li.m-item--text').each(function(index) {
                    $select.append($('<option />').attr('value', index).html($(this).html(), "placeholder", "Votre email"));
                });
                $list.eq(1).replaceWith($select);
                jQuery($('select')).addClass('select-dropdown');
                jQuery('.select-dropdown').after(jQuery('<span class=\"a-dropdown__ui\"></span>'));
                jQuery('.select-dropdown').css({'padding': '.75em 1.25em', 'width': '100%', 'border': '1px solid #aaa', 'min-height': '3.125em', })
                jQuery('.select-dropdown SPAN').addClass('newSpan');
                jQuery('.newSpan').css({'margin-left': '-30px'});
        }, 200);
  }
});