Javascript 如何更改脚本以使用更多UL选择框？

我找到了ul选择框的代码。我需要3个不同的ul选择框。所以我做了一些改变，但现在是幻灯片上只有去年的选择框。“选定”标签是否有问题

原始代码：

$（“ul”）。在（“click”，“.init”，function（）上{
$（this）.slideDown（）；
});
var allOptions=$（“ul”）.children（'li:not（.init'）；
$（“ul”）。在（“单击”，“li:not（.init）”，函数（）上{
allOptions.removeClass（'selected'）；
$（this.addClass（'selected'）；
$（“ul”）.children（'.init'）.html（$（this.html（））；
allOptions.slideUp（）；
});
ul{
高度：30px；
宽度：150px；
边框：1px#000实心；
}
ul li{填充：5px 10px；z索引：2；}
ul li:not（.init）{float:left；宽度：130px；显示：无；背景：#ddd；}
ul-li:not（.init）：悬停，ul-li.selected:not（.init）{background:#09f；}
li.init{cursor:pointer；}
a#提交{z-index:1；}


[选择]
选项1
选项2
选项3
您只需使用迭代器将原始代码打包，您的问题就会得到解决

使用3个UL标签，您可以复制和粘贴UL块，以便在所有UL标签上使用相同的代码

这就是js代码的外观

JS:

$(document).ready(function(){

  $("ul").each(function(){

    var $thisUL = $(this);
    $thisUL.on("click", ".init", function() {
        $(this).closest("ul").children('li:not(.init)').slideDown();
    });

    var allOptions = $thisUL.children('li:not(.init)');
    $thisUL.on("click", "li:not(.init)", function() {
        allOptions.removeClass('selected');
        $(this).addClass('selected');
        $thisUL.children('.init').html($(this).html());
        allOptions.slideUp();
    });

  });

});