title: jQuery - apply function to multiple select elements with same class name
body: <p>This is what I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html" /&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;
      &lt;/script&gt;
      &lt;title&gt;
        Select
      &lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;script type="text/javascript"&gt;
        var MyArray = {
          "Windows": "imgx.jpg",
          "Linux": "imgt.jpg",
          "Mac": "imgi.jpg",
          "MS DOS": "imgy.jpg",
          "1GB": "imggb.jpg"
        }
  
        jQuery(function() {
  
          jQuery('.product').change(function() {
  
            var xkey = MyArray[jQuery.trim(jQuery(".product option:selected").text())];
  
            if (typeof xkey == 'string') {
  
              alert(xkey);
  
            }
  
          });
  
  
        });
      &lt;/script&gt;
      &lt;div&gt;
        &lt;select name="options_random_nr_yy" class="product"&gt;
          &lt;option value=""&gt;
            -- Select --
          &lt;/option&gt;
          &lt;option value="56"&gt;
            1GB
          &lt;/option&gt;
          &lt;option value="57"&gt;
            2GB
          &lt;/option&gt;
          &lt;option value="73"&gt;
            4GB
          &lt;/option&gt;
          &lt;option value="209"&gt;
            8GB
          &lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;select name="options_random_nr_xx" class="product"&gt;
          &lt;option value=""&gt;
            -- Select --
          &lt;/option&gt;
          &lt;option value="63"&gt;
            Windows
          &lt;/option&gt;
          &lt;option value="65"&gt;
            Linux
          &lt;/option&gt;
          &lt;option value="67"&gt;
            Mac
          &lt;/option&gt;
          &lt;option value="89"&gt;
            MS DOS
          &lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that it always return "undefined" when I select an option. However, if I remove one of the <code>&lt;select&gt;</code> elements, it works fine! </p>
  
  <p>How can I apply the same function to all <code>&lt;select&gt;</code> elements with same class name (in this example the common class is "product")?</p>