title: Get selected value of option with multiple dropdown menus using javascript
body: <p>I have multiple features that have multiple options that need to be updated when an option is selected. I also need to pass a third piece of data through the attribute element.</p>
  
  <p><code>.getElementById()</code> works for a single dropdown menu, but how do I get it to work when there are multiple menus on the page?</p>
  
  <p>I have tried <code>var e = document.getElementsByClassName("testClass");</code> which did not work.</p>
  
  <p>I also tried to create <code>optionsText</code> &amp; <code>optionsValue</code> in the same way that <code>optionsFtr</code> is created with <code>var optionsValue = $('option:selected', this).value;</code> and that didn't work either.</p>
  
  <p><a href="http://jsfiddle.net/8awqLek4/4/" rel="nofollow">http://jsfiddle.net/8awqLek4/4/</a></p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div class="ftrsTitle"&gt;BODY&lt;/div&gt;
          &lt;select class="testClass" id="testId"&gt;
              &lt;option&gt;Select&lt;/option&gt;
              &lt;option ftr="bod" value="blk"&gt;Black&lt;/option&gt;
              &lt;option ftr="bod" value="grn"&gt;Kelly Green&lt;/option&gt;
              &lt;option ftr="bod" value="red"&gt;Red&lt;/option&gt;
              &lt;option ftr="bod" value="roy"&gt;Royal&lt;/option&gt;
          &lt;/select&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="ftrsTitle"&gt;TRIM&lt;/div&gt;
          &lt;select class="testClass"&gt;
              &lt;option&gt;Select&lt;/option&gt;
              &lt;option ftr="trm" value="blk"&gt;Black&lt;/option&gt;
              &lt;option ftr="trm" value="grn"&gt;Kelly Green&lt;/option&gt;
              &lt;option ftr="trm" value="red"&gt;Red&lt;/option&gt;
              &lt;option ftr="trm" value="roy"&gt;Royal&lt;/option&gt;
          &lt;/select&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="vars"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript Code</p>
  
  <pre><code>$(document).ready(function () {
      $("select").on('change', function () {
          var e = document.getElementById("testId");
          var optionsText = e.options[e.selectedIndex].text;
          var optionsValue = e.options[e.selectedIndex].value;
          var optionsFtr = $('option:selected', this).attr('ftr');
          $("#vars").html("&lt;p&gt;optionsText: " + optionsText + "&lt;/p&gt;&lt;p&gt;optionsValue: " + optionsValue + "&lt;/p&gt;&lt;p&gt;optionsFtr: " + optionsFtr + "&lt;/p&gt;");
      });
  });
  </code></pre>