选择完成后，如何关闭下拉菜单？

Question

最初，我只想根据所选类型进行过滤。然后，我决定要使用<li>而不是<select>模拟一个下拉列表，因为我刚刚弄清楚了过滤器，并认为它会更快。我错了。我相信使用“点击”可以轻松解决此问题

我尝试将代码片段分解为最简单的部分，并且能够使每个功能分开工作，但是未能使它们一起工作。

<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li id="opt1" data-value="value 1" class="filter">Option 1</li>
    <li id="opt2" data-value="value 2" class="filter">Option 2</li>
    <li id="reset"  data-value="value 3" class="filter">Option 3</li>
</ul>

单击选择时，预期的行为是选择框由所选类型填充。目前，下拉列表保持打开状态，所有选择类型均可见