title: Getting .val() of select tag .on('change') not working when using "nice-select" jQuery plugin to style the select tag
body: <p>I have a normal select tag in html</p>
  
  <pre><code>&lt;div&gt;
   &lt;select name="sort-by" id="sort-by" class="nice-select show-menu-arrow"&gt;
    &lt;option value="sortby"&gt;Sort By..&lt;/option&gt;
    &lt;option value="Section"&gt;Section&lt;/option&gt;
    &lt;option value="Alphabetical"&gt;Alphabetical&lt;/option&gt;
    &lt;option value="Time"&gt;Time&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the following code in jQuery to send an AJAX request (using the .val() of the select tag) when either of the following events happen in my form: a select tag changes, a checkbox is clicked, or a character is entered into the search bar.</p>
  
  <pre><code>$("#filter-words select,  #filter-words input[type='checkbox'], #filter-words input[type='text']").on('change keyup', function() {
  
  var sortBy = $("#filter-words select#sort-by").val();
  </code></pre>
  
  <p>This code worked fine until I used the jQuery plugin "nice-select" 
  (<a href="http://hernansartorio.com/jquery-nice-select/" rel="nofollow noreferrer">http://hernansartorio.com/jquery-nice-select/</a>)</p>
  
  <p>When using this plugin, the .on('change') event doesn't work on the select tag. The reason for this (I believe) is that, according to the nice-select page (link above), when using the plugin, this:</p>
  
  <pre><code>&lt;select&gt;
    &lt;option value="1"&gt;Some option&lt;/option&gt;
    &lt;option value="2"&gt;Another option&lt;/option&gt;
    &lt;option value="3" disabled&gt;A disabled option&lt;/option&gt;
    &lt;option value="4"&gt;Potato&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>becomes this: </p>
  
  <pre><code>&lt;div class="nice-select"&gt;
    &lt;span class="current"&gt;Some option&lt;/span&gt;
    &lt;ul class="list"&gt;
      &lt;li class="option selected"&gt;Some option&lt;/li&gt;
      &lt;li class="option"&gt;Another option&lt;/li&gt;
      &lt;li class="option disabled"&gt;A disabled option&lt;/li&gt;
      &lt;li class="option"&gt;Potato&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SO MY QUESTION IS: </p>
  
  <p>How can I get around this problem? According to this question (<a href="https://stackoverflow.com/questions/13479342/change-function-stop-working-when-i-add-dropkick-or-multiselect-plugins-to-style">Change function stop working when I add Dropkick or MultiSelect plugins to style Select elements</a>) the select tag plugins DropKick and MultiSelect have this documented, but I can't seem to find any documentation on this problem for nice-select.</p>