具有多选下拉菜单的JavaScript过滤器元素

问题描述

我已经参加了一个多星期，但我仍在刷新ES6 JavaScript。

我正在使用Bootstrap Select作为多选下拉菜单。

这是多选和搜索输入标记：

<div class="col-lg-4">
  <form>
    <div class="form-group">
      <h5>Products & Services</h5>
      <select id="filter-select" class="form-control filter selectpicker" multiple>
       {% for item in filters %}
         <option data-filter="{{ item.data_filter }}">{{ item.title }}</option>
       {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="search-filter" placeholder="Search...">
    </div>
  </form>
</div>

Bootstrap Select正在修改选择输入，并使用lis创建一个下拉列表ul：

<li>
  <a role="option" class="dropdown-item" id="bs-select-1-6" tabindex="0" aria-selected="false" aria-setsize="10" aria-posinset="7">
    <span class=" bs-ok-default check-mark"></span>
    <span class="text">information Technology</span>
  </a>
</li>

需要过滤的帖子：

<div id="posts" class="row mb-2">
      {% for post in seq %}
        <div class="col-lg-4 post">
          {# <div class="{% for category in post.Meta('categories') %}{{ category.category|url_encode }} {% endfor %}"> #}
          <div data-filter="{% for category in post.Meta('categories') %}{{ category.category }},{% endfor %}">
            <div class="content-header-blue round-top-right">
              <h5 class="m-0 pb-1">{{ post.title }}</h5>
              <p class="m-0 orange">{{ post.subtitle }}</p>
            </div>
            <div class="content-body sp round-bottom-left shadow mb-4 p-3">
              <img class="sp-logo" src="{{ Image(post.logo).src }}" alt="{{ post.title }} logo" width="100%">
              <div class="d-flex justify-content-center mt-3">
                <a class="btn btn-primary waves-effect waves-light" href="{{ post.link }}">View Profile <i class="fas fa-chevron-right pl-1"></i></a>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>

到目前为止，我有JS：

// Filtering

$('#filter-select').on('changed.bs.select',function (e,clickedindex,isSelected,prevIoUsValue) {
  let dropdown = document.getElementById('filter-select');

  let items = document.getElementById('posts');

  let item = items.querySelectorAll('div.post');

  for (let i = 0; i < item.length; i++) {
    let filterItem = item[0];
    console.log(filterItem);
    if (filterItem.innerHTML.toupperCase().indexOf(options) > -1) {
      item[i].style.display = '';
    } else {
      item[i].style.display = 'none';
    }
  }
});

// Filter by searchable input field

let filterInput = document.getElementById('search-filter');

filterInput.addEventListener('keyup',filterPosts);

function filterPosts(){
  let filterValue = document.getElementById('search-filter').value.toupperCase();

  let posts = document.getElementById('posts');

  let post = posts.querySelectorAll('div.post');

  for (let i = 0; i < post.length; i++) {
    let filterItem = post[i].getElementsByTagName('h5')[0];
    if (filterItem.innerHTML.toupperCase().indexOf(filterValue) > -1) {
      post[i].style.display = '';
    } else {
      post[i].style.display = 'none';
    }
  }
}

如果有人可以提供一些我可以理解的见解或一些代码示例，我将不胜感激。

我目前正在学习ES6 JavaScript课程，我仍在学习。

我的问题是如何过滤多选下拉列表中单击/选定的元素并显示选定的元素。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-select javascript