title: Dynamic jQuery dropdown to show/hide div elements based on selected option
body: <p>I'm creating an events list with a category filter at the top. The category filter will be a <code>&lt;select&gt;</code> dropdown, with dynamically generated <code>&lt;option&gt;</code> variables. When an option is selected, the events list should then be filtered to only show elements containing that text.</p>
  <p>The HTML for this events list is generated by the content management system so I can't edit this directly, but I can use CSS and jQuery to manipulate it.</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div id=&quot;event-filters&quot;&gt;
      &lt;div class=&quot;dropdown-container&quot;&gt;
          &lt;select id=&quot;categoryFilter&quot;&gt;
              &lt;option&gt;All&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;msl_eventlist&quot;&gt;
      &lt;div&gt;
          &lt;div class=&quot;event_item msltypeFree msltypeDay msltypeOnline&quot;&gt;
              // Some other event details
              &lt;div class=&quot;msl_event_types&quot;&gt;
                  &lt;a&gt;Free&lt;/a&gt;
                  &lt;a&gt;Day&lt;/a&gt;
                  &lt;a&gt;Online&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;event_item msltypeFree msltypeDay msltypeOnline&quot;&gt;
              // Some other event details
              &lt;div class=&quot;msl_event_types&quot;&gt;
                  &lt;a&gt;Night&lt;/a&gt;
                  &lt;a&gt;Online&lt;/a&gt;
                  &lt;a&gt;Club&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'd like each <code>&lt;option&gt;</code> for the dropdown to be generated by the <code>&lt;a&gt;</code> elements within <code>.msl_event_types</code>, without creating the same one twice if there's repetition (e.g. more than one event being an online event, as above). Because there's 30+ different types possible, I don't want to write them all in manually and have them all visible at all times - I want the script to see what's actually being used and create the options accordingly.</p>
  <p>When one of these options is selected, the list should then filter either by the text within the <code>&lt;a&gt;</code> element or by the relevant class (<code>msltypeFree</code>, <code>msltypeOnline</code>, etc), whichever is easier.</p>
  <p>The option list should also include an 'all' option, which should be the default option as well as being a selectable option to reset the category filter.</p>
  <p>Normally I'm able to take a stab at something like this but I honestly don't even know where to begin with it, so any help is really appreciated!</p>
  <p><strong>Edit:</strong> Added in the  input to the top, as I can edit the HTML outside of the widget.</p>