Javascript 带可滚动选择列表的引导下拉列表

我试图制作一个下拉列表，其中包含两个命令（Sort asc和Sort des），一次单击即可执行，并在顶部列出，然后在“选择筛选”下列出一个部分，该部分有一个命令“Toggle All”（不关闭下拉列表）和一个可滚动的名称列表（不在顶部滚动命令）可通过复选框选择的

我已经有了一个很好的方法，我不能实现的部分是只有名字的卷轴。当我尝试实现复选框时，名称会改变外观，我希望复选框与其他命令对齐，然后是填充，然后是名称（不是boled）。 但我得到左对齐框，没有填充和粗体的名称。 然后是滚动条，我不能只设置名字，它会覆盖所有的下拉菜单，或者我会得到一个单独的滚动条，每个名字都在下面的coed中。 我想创建一个子类来： 这使我可以为这些菜单项设置滚动条

我曾经尝试过标签上的div:s和class，但我想不出来。 请帮我把这个弄对

HTML

---

之所以使用粗体，是因为标签选择器的引导css是粗体的。因此，要改变这一点：

li.dropdown-menu-form label, .dd-list li label {
  font-weight: normal;
}

要在复选框后添加填充，请执行以下操作：

li.dropdown-menu-form input, .dd-list li input {
  display: inline-block;
  margin-right: 10px;
}

---

为了使滚动条正确，您不能告诉li.dropdown-menu-form滚动条的最大高度为100px和overflow-y，因为这将应用于类下拉菜单表单的每个单独列表项。因此，您可以尝试将下拉列表包装在div中，并为其指定一个不同的类，您可以将max-height和overflow-y属性应用于该类。（就像你包装了你的dd列表一样）。

我最终得到了它，你是对的，但是我没有使用div，而是使用了

标记来包装可滚动菜单。我已将更正后的代码添加到问题中。

<script>
    $('.dropdown-menu').on('click', function(e) {
        if($(this).hasClass('dropdown-menu-form')) {
            e.stopPropagation();
        }
        if($(this).hasClass('dd-list')) {
            e.stopPropagation();
        }
    });
</script>

li.dropdown-menu-form {
    padding: 5px 10px 0;
    max-height: 100px;
    overflow-y: scroll;
}

#dd-list {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 10px;
    font-weight: normal;
    overflow-y: scroll;
}


Corrected CSS:
ul.dropdown-menu-form {
    padding-left: 20px;
    list-style-type: none;
    max-height: 100px;
    overflow-y: scroll;
}

li.dropdown-menu-form label, .dd-list li label {
  font-weight: normal;
}

li.dropdown-menu-form input, .dd-list li input {
  display: inline-block;
  margin-right: 10px;
}