title: How to get the selected element of the dropdown selectMenu widgets having the same classes using jQuery?
body: <p>I developed a dropdown list using the jQuery UI selectMenu widget. Although I developed a drop-down component in the Angular and reused it many times. Now the problem was that I gave the same class name to each of those dropdown lists and I was trying to get the value of the selected option from each of the dropdown lists. Given below is the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $.widget("custom.mySelectMenu", $.ui.selectmenu, {
      _renderMenu: function(ul, items) {
        console.log(items);
        var that = this,
          currentCategory = "";
        ul.parent().prepend("&lt;ul class='ui-header ui-menu ui-corner-bottom ui-widget ui-widget-content'&gt;&lt;li class='ui-menu-item'&gt;&lt;span class='ui-menu-item-wrapper'&gt;" + "CODE" + "&lt;/span&gt;&lt;span class='ui-menu-item-wrapper'&gt;" + "DESCRIPTION" + "&lt;/span&gt;&lt;span class='ui-menu-item-wrapper'&gt;" + "PRICE" + "&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;");
        $.each(items, function(index, item) {
          var li, name, short, price;
          if (item.optgroup != currentCategory) {
            ul.append(
              "&lt;li class='ui-selectmenu-optgroup ui-menu-divider ui-selectmenu-category'&gt;" + item.optgroup + "&lt;/li&gt;"
            );
            currentCategory = item.optgroup;
          }
          li = that._renderItemData(ul, item);
          console.log(ul);
          name = li.text();
          short = item.element.data("short");
          price = item.element.data("price");
          // console.log(li, short, price);
          li.prepend(
            $("&lt;span&gt;", {
              class: "short"
            }).html(short)
          );
          li.append(
            $("&lt;span&gt;", {
              class: "price"
            }).html(price)
          );
          if (item.optgroup) {
            li.attr("aria-label", item.optgroup + " : " + item.label);
          }
        });
      }
    });
  
    $(".options").mySelectMenu({
      width: 300
    });
    $(".options")
      .mySelectMenu("menuWidget")
      .addClass("overflow");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ui-menu .ui-menu-item {
    display: table;
    width: 100%;
  }
  
  .ui-selectmenu-category {
    color: #5f5f5f;
    padding: 0.5em 0.25em;
    min-width: 290px;
    font-style: italic;
  }
  
  .ui-header {
    font-weight: bold;
    position: absolute;
    background-color: #004600;
    z-index: 1;
    height: 25px;
    width: 100%;
  }
  
  .ui-header .ui-menu-item .ui-menu-item-wrapper {
    padding: 0px;
  }
  
  #options-menu {
    margin-top: 25px;
  }
  
  .ui-menu-item .ui-menu-item-wrapper {
    display: table-cell;
    vertical-align: top;
    padding: 1em 2px;
  }
  
  .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    border-width: 1px 0px 1px 0px;
    border-color: #cccccc;
    background-color: #e4ebf1;
    color: #000;
  }
  
  .ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
    color: #2e6d99;
  }
  
  .ui-menu-item div.ui-menu-item-wrapper {
    width: 290px;
  }
  
  .ui-menu-item .short {
    color: #2e6d99;
    font-weight: strong;
    width: 30px;
    padding-left: 0.5em;
    position: relative;
  }
  
  .ui-menu-item .price {
    font-weight: strong;
    width: 75px;
    margin-right: -6px;
  }
  
  .overflow {
    height: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;jQuery UI Selectmenu - Custom Rendering&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;label for="options"&gt;Select an Option:&lt;/label&gt;
    &lt;select class="options"&gt;
    &lt;optgroup label="PREFERRED OPTIONS"&gt;
      &lt;option data-short="L" data-price="$0.00"&gt;Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd&lt;/option&gt;
      &lt;option data-short="K" data-price="$0.00"&gt;Standard Screw Adjustment&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="STANDARD OPTIONS"&gt;
      &lt;option data-short="C" data-price="$5.00" &gt;Tamper Resistant - Factory Set&lt;/option&gt;
      &lt;option data-short="K" data-price="$6.00" &gt;Handknob&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="ADDITIONAL OPTIONS"&gt;
      &lt;option data-short="F" data-price="$4.00"&gt;Hex Head Screw with Locknut&lt;/option&gt;
      &lt;option data-short="G" data-price="$4.00"&gt;Hex Head Screw with Locknut&lt;/option&gt;
      &lt;option data-short="H" data-price="$4.00" &gt;Hex Head Screw with Locknut&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;label for="options"&gt;Select an Option:&lt;/label&gt;
    &lt;select class="options"&gt;
    &lt;optgroup label="PREFERRED OPTIONS"&gt;
      &lt;option data-short="L" data-price="$0.00"&gt;Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd&lt;/option&gt;
      &lt;option data-short="K" data-price="$0.00"&gt;Standard Screw Adjustment&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="STANDARD OPTIONS"&gt;
      &lt;option data-short="C" data-price="$5.00" &gt;Tamper Resistant - Factory Set&lt;/option&gt;
      &lt;option data-short="K" data-price="$6.00" &gt;Handknob&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="ADDITIONAL OPTIONS"&gt;
      &lt;option data-short="F" data-price="$4.00"&gt;Hex Head Screw with Locknut&lt;/option&gt;
      &lt;option data-short="G" data-price="$4.00"&gt;Hex Head Screw with Locknut&lt;/option&gt;
      &lt;option data-short="H" data-price="$4.00" &gt;Hex Head Screw with Locknut&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, given below is the jQuery code which I wrote for getting the selected element in each of those dropdown lists.</p>
  
  <pre><code>  $('.options').mySelectMenu({
          change: function (event, ui) {
            console.log($('option:selected').text());
          }
        });
  </code></pre>
  
  <p>Now, writing like this printed the values of all the selected options of all the dropdown lists which I don't want but what I wanted was to print the value of only one option of only one dropdown list.</p>
  
  <p>Can anyone suggest how to do that in this case?</p>