如何从下拉引导程序中选择值时过滤数据

Question

在我的网页上有一个包含不同项目的下拉列表（引导程序），我希望过滤通过此下拉列表显示的元素。

我的下拉列表如下：

此代码：

<div class="btn-group dropdown todos" id="todos">
            <button class="btn btn-default dropdown-toggle botn-todos" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Todos
            <span class="caret caret-posicion"></span>
            </button>
            <ul class="dropdown-menu ancho-todos" aria-labelledby="dropdownMenu1">
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-1" name="1"><span> Todos</span></a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-3" name="3"> En camino</a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-9" name="9"> En camino - 2do intento</a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-6" name="6"> Entregado</a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-12" name="12"> Entregado al 2do intento</a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="nose" name=""> No se puede entregar</a></li>
              <li><a href="#"><input value="1" name="busqueda1" type="radio" class="status-7" name="7"> Cancelado</a></li>
            </ul>
          </div>

我要过滤的项目如下：

我不知道是否可以帮助我在dropdown中的属性onchnage，但是过滤器的代码我不知道。

下拉项目有一个类，名称与列表元素匹配。

Answer 1

您可以做的是根据所选的单选选项为要过滤的每个数据设置一个类。在您选择了一个数据后，查看您需要过滤的所有数据，以及那些没有与您尝试过滤的内容匹配的数据，将hide类添加到它们中。