title: Select filter hides all the items in the list
body: <p>I am trying to create a select dropdown filter which dynamically gets its values and data from rest api.</p>
  <p>Here is my code</p>
  <p>HTML</p>
  <pre><code>
  &lt;div class=&quot;container&quot;&gt;
      &lt;select data-filter=&quot;season&quot; class=&quot;filter_category_name filter form-control&quot;&gt;&lt;/select&gt;
      &lt;div class=&quot;listContent&quot; id=&quot;listitem&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>JS</p>
  <pre><code>var data = [{
          &quot;category_name&quot;: &quot;1&quot;,
          &quot;title&quot;: &quot;One One&quot;,
          &quot;more&quot;: [{
              &quot;details&quot;: &quot;some details&quot;
          }]
      },
      {
          &quot;category_name&quot;: &quot;1&quot;,
          &quot;title&quot;: &quot;One Two&quot;,
          &quot;more&quot;: [{
              &quot;details&quot;: &quot;some details&quot;
          }]
      },
      {
          &quot;category_name&quot;: &quot;2&quot;,
          &quot;title&quot;: &quot;Two One&quot;,
          &quot;more&quot;: [{
              &quot;details&quot;: &quot;some details&quot;
          }]
      },
      {
          &quot;category_name&quot;: &quot;3&quot;,
          &quot;title&quot;: &quot;Three One&quot;,
          &quot;more&quot;: [{
              &quot;details&quot;: &quot;some details&quot;
          }]
  }];
  
  
  let listItems = &quot;&quot;,
      categoryAll = &quot;&quot;;
  
  for(var i = 0;i &lt; data.length; i++) {
  
      var title = data[i].title,
          category_name = data[i].category_name;
  
      listItems += &quot;&lt;a onclick='createAVideoContainer(&quot; + i + &quot;)'&gt;&lt;div class='listItem'&gt;&lt;p&gt;&quot; + title + &quot;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&quot;;
  
      if (categoryAll.indexOf(&quot;&lt;option value='&quot; + category_name + &quot;'&gt;&quot; + category_name + &quot;&lt;/option&gt;&quot;) == -1) {
          categoryAll += &quot;&lt;option value='&quot; + category_name + &quot;'&gt;&quot; + category_name + &quot;&lt;/option&gt;&quot;;
      }
  }
  
  $(&quot;#listitem&quot;).html(listItems);
  $(&quot;.filter_category_name&quot;).append(categoryAll);
  
  var filtersObject = {};
  
  $(&quot;.filter&quot;).on(&quot;change&quot;,function() {
      var filterName = $(this).data(&quot;filter&quot;),
          filterVal = $(this).val();
      
      if (filterVal == &quot;&quot;) {
          delete filtersObject[filterName];
      } else {
          filtersObject[filterName] = filterVal;
      }
      
      var filters = &quot;&quot;;
      
      for (var key in filtersObject) {
            if (filtersObject.hasOwnProperty(key)) {
              filters += &quot;[data-&quot;+key+&quot;='&quot;+filtersObject[key]+&quot;']&quot;;
            }
      }
      
      if (filters == &quot;&quot;) {
          $(&quot;.listItem&quot;).show();
      } else {
          $(&quot;.listItem&quot;).hide();
          $(&quot;.listItem&quot;).hide().filter(filters).show();
      }
  });
  </code></pre>
  <p>But for some reason it hides all the items and nothing change after changing the options</p>
  <p>I want to initially load all the items and then filter based on the option</p>
  <p>I want the select element to dynamically create the options with the values of the category names like the first option should have the value of cars1 and display all the other objects with the same category_name.</p>
  <p>Note: The entire code is wrapped inside an async function which renders on page load.</p>
  <p>Here is a proper <a href="https://jsfiddle.net/AlkenDester/80qn2ve9/1/" rel="nofollow noreferrer">working js fiddle with the above problem</a></p>