title: create dynamic selector in jquery plugin
body: <p>I am creating a jquery plugin and my html is like</p>
  
  <pre><code>&lt;select class="filter"&gt;
      &lt;option value=""&gt;Select Brand&lt;/option&gt;
      &lt;option value="value1"&gt;value1&lt;/option&gt;
      &lt;option value="value2"&gt;value2&lt;/option&gt;
      &lt;option value="value3"&gt;value3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>my plugin code is like</p>
  
  <pre><code>(function( $ ) {
      $.fn.filterCategory = function( options ) {
          $(".filter option").each(function(){
              var text = $(this).text();
              $(this).attr("data-val",text);
          });
          // other code...
      };
  }( jQuery ));
  </code></pre>
  
  <p>and i call it like</p>
  
  <pre><code>$("select.filter").filterCategory();
  </code></pre>
  
  <p>the problem is if i want to call this plugin by id like</p>
  
  <pre><code>$("select#filter").filterCategory();
  </code></pre>
  
  <p>or by other class or id like</p>
  
  <pre><code> $("select.new_filter").filterCategory();
   $("select#new_filter").filterCategory();
  </code></pre>
  
  <p>then the html will be like </p>
  
  <pre><code>&lt;select id="filter"&gt;
      &lt;option&gt;...&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>then i will have to make changes on my plugin. It means it works only for <strong><em>.filter</em></strong> only. How can i make this code dynamic</p>
  
  <pre><code>$(".filter option").each(function(){ ... }
  </code></pre>