将多个下拉列表转换为div并将其分组到jquery

我正在尝试将select下拉列表转换为div，我非常接近实现这一点，但问题是div并不像下拉列表那样被分成组。在我的结果中，我能够转换它们，但它将我所有的选择都置于ul之下，并且没有将它们分开

var$select=$（'miopts2 select'），
$ul=$（'
'）.attr（'id'，$select.attr（'id'））.attr（'name'，$select.attr（'name'））；
$select.children（）.each（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
});
$select.replaceWith（$ul）；

处理器
3.8千兆赫
4.2千兆赫
记忆
8GB
16GB
32GB
64GB
存储
2TB
3TB
512GB固态硬盘
1TB固态硬盘
2TB固态硬盘
鼠标或触摸板
魔鼠
魔幻触控板
鼠标+触控板
这些是我目前的结果。

处理器
3.8 GHz
4.2 GHz
内存
8GB
16GB
32GB
64GB
存储
2TB
3TB
512GB固态硬盘
1TB固态硬盘
2TB固态硬盘
鼠标或触摸板
魔法鼠标
魔法触控板
鼠标+触摸板

这就是我想要达到的目标。

处理器
3.8 GHz
4.2 GHz


内存
8GB
16GB
32GB
64GB


存储
2TB
3TB
512GB固态硬盘
1TB固态硬盘
2TB固态硬盘


鼠标或触摸板
魔法鼠标
魔法触控板
鼠标+触摸板

如下更新您的代码

$('#miopts2 select').each(function() {
    var $select = $(this);
    var $ul = $('<ul></ul>').attr('id', $select.attr('id')).attr('name', $select.attr('name'));

    $select.children().each(function(e, i) {
        var $options = $(this);
        $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
    });

    $select.replaceWith($ul);
});

$（'miopts2 select'）。每个（函数（）{
变量$select=$（此变量）；
var$ul=$（'
'）.attr（'id'，$select.attr（'id'））.attr（'name'，$select.attr（'name'））；
$select.children（）.each（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
});
$select.replaceWith（$ul）；
});

您的完整代码如下所示。

$（'miopts2 select'）。每个（函数（）{
变量$select=$（此变量）；
var$ul=$（'
'）.attr（'id'，$select.attr（'id'））.attr（'name'，$select.attr（'name'））；
$select.children（）.each（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
});
$select.replaceWith（$ul）；
});

处理器
3.8千兆赫
4.2千兆赫
记忆
8GB
16GB
32GB
64GB
存储
2TB
3TB
512GB固态硬盘
1TB固态硬盘
2TB固态硬盘
鼠标或触摸板
魔鼠
魔幻触控板
鼠标+触控板
如下更新您的代码

$('#miopts2 select').each(function() {
    var $select = $(this);
    var $ul = $('<ul></ul>').attr('id', $select.attr('id')).attr('name', $select.attr('name'));

    $select.children().each(function(e, i) {
        var $options = $(this);
        $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
    });

    $select.replaceWith($ul);
});

$（'miopts2 select'）。每个（函数（）{
变量$select=$（此变量）；
var$ul=$（'
'）.attr（'id'，$select.attr（'id'））.attr（'name'，$select.attr（'name'））；
$select.children（）.each（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
});
$select.replaceWith（$ul）；
});

您的完整代码如下所示。
$（'miopts2 select'）。每个（函数（）{
变量$select=$（此变量）；
var$ul=$（'
'）.attr（'id'，$select.attr（'id'））.attr（'name'，$select.attr（'name'））；
$select.children（）.each（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
});
$select.replaceWith（$ul）；
});

处理器
3.8千兆赫
4.2千兆赫
记忆
8GB
16GB
32GB
64GB
存储
2TB
3TB
512GB固态硬盘
1TB固态硬盘
2TB固态硬盘
鼠标或触摸板
魔鼠
魔幻触控板
鼠标+触控板
您是否尝试在选择上迭代，而不是在选项上迭代。
$select.childrens（）。每个都在迭代所有选项。因此，您需要在select上迭代，或者需要在当前循环中标识父循环

$select.each(function(e,i){
 $ul = $('<ul></ul>').attr('id', $(this).attr('id')).attr('name', $(this).attr('name'));
 $(this).find('option').each(function(e,i){
 var $options = $(this);
    $('<li></li>').val($options.val()).text($options.text()).appendTo($ul);
 })
 //make use of this $ul
 })

$select.each（函数（e，i）{
$ul=$（'
）.attr（'id'，$（this.attr（'id'））.attr（'name'，$（this.attr（'name'））；
$（this）.find（'option'）。每个（函数（e，i）{
var$选项=$（此）；
$（'
'）.val（$options.val（））.text（$options.text（））.appendTo（$ul）；
})
//使用这个$ul
})
您是否尝试在选择上迭代，而不是在选项上迭代。
$select.childrens（）。每个都在迭代所有选项。因此，您需要在select上迭代，或者需要在curr中标识父级