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

Question

在我的网页上有一个具有不同项目的下拉列表(bootstrap)，我想过滤这个下拉列表中显示的元素。

我的下拉列表如下所示：

​

​

代码如下：

<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>

我要过滤的项目如下所示：

​

​

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

下拉项有一个与列表元素相匹配的类和名称。

Answer 1

您可以根据所选的单选选项为要过滤的每个数据段设置一个类。选择一个之后，检查您需要过滤的任何数据，对于id与您试图过滤的数据不匹配的数据，向它们添加hide类。