title: How to get the value of selected item on change using jQueryUI Selectenu
body: <p>I am using the Select Menu widget to display a list of states within a form:</p>
  
  <pre><code>&lt;select name="state" id="state"&gt;
     &lt;option value = ""&gt;Select State&lt;/option&gt;
     &lt;option value = "Alabama"&gt;Alabama&lt;/option&gt;
     &lt;option value= "Alaska"&gt;Alaska&lt;/option&gt;
     &lt;option value= "Arizona"&gt;Arizona&lt;/option&gt;
     &lt;option value= "California"&gt;California&lt;/option&gt;
     &lt;option value= "Colorado"&gt;Colorado&lt;/option&gt;
     &lt;option value= "Connecticut"&gt;Connecticut&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>In my script I have</p>
  
  <pre><code> $( "#state" ).selectmenu();
  </code></pre>
  
  <p>Now, what I am trying to do is send out an alert of the value of the selected option.  So I have this:</p>
  
  <pre><code>$('select').on('change', function (e) {
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;
      alert(valueSelected);
  });   
  </code></pre>
  
  <p>The issue is that for some reason none of that is working when I use the JQueryUI function <code>selectmenu()</code></p>
  
  <p>When I remove that one line, everything functions as normal. It was my understanding that I need to include  <code>$( "#state" ).selectmenu();</code> in order to utilize the JQuery UI theme and functionality.</p>
  
  <p>Can anyone enlighten me on what the issue may be.  Again, it works fine if I remove that selectmenu line. </p>
  
  <p>Thanks!</p>