title: How to get jQuery dropdown value onchange event
body: <p>I have added two jQuery UI Dropdown Autocomplete script. Now I want get both value onchange of second dropdown and want to store separately in variable. How it is possible?</p>
  
  <p>Any ideas or suggestions? Thanks.</p>
  
  <p><strong>My Fiddle:</strong> <a href="http://jsfiddle.net/YNCTY/316/">Sample</a></p>
  
  <p><strong>My JS Code:</strong></p>
  
  <pre><code>(function($) {
              $.widget("ui.combobox", {
                  _create: function() {
                      var self = this,
                      select = this.element.hide(),
                      selected = select.children(":selected"),
                      value = selected.val() ? selected.text() : "";
                      var input = this.input = $("&lt;input&gt;").insertAfter(select).val(value).autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: function(request, response) {
                              var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                              response(select.children("option").map(function() {
                                  var text = $(this).text();
                                  if (this.value &amp;&amp; (!request.term || matcher.test(text)))
                                      return {
                                      label: text.replace(new RegExp("(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"), "&lt;strong&gt;$1&lt;/strong&gt;"),
                                      value: text,
                                      option: this
                                  };
                              }));
                          },
                          select: function(event, ui) {
                              ui.item.option.selected = true;
                              self._trigger("selected", event, {
                                  item: ui.item.option
                              });
                              select.trigger("change");
                          },
                          change: function(event, ui) {
                              if (!ui.item) {
                                  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                  valid = false;
                                  select.children("option").each(function() {
                                      if ($(this).text().match(matcher)) {
                                          this.selected = valid = true;
                                          return false;
                                      }
                                  });
                                  if (!valid) {
                                      // remove invalid value, as it didn't match anything
                                      $(this).val("");
                                      select.val("");
                                      input.data("autocomplete").term = "";
                                      return false;
                                  }
                              }
                          }
                      }).addClass("ui-widget ui-widget-content ui-corner-left");
  
                      input.data("autocomplete")._renderItem = function(ul, item) {
                          return $("&lt;li&gt;&lt;/li&gt;").data("item.autocomplete", item).append("&lt;a&gt;" + item.label + "&lt;/a&gt;").appendTo(ul);
                      };
  
                      this.button = $("&lt;button type='button'&gt;&amp;nbsp;&lt;/button&gt;").attr("tabIndex", -1).attr("title", "Show All Items").insertAfter(input).button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function() {
                          // close if already visible
                          if (input.autocomplete("widget").is(":visible")) {
                              input.autocomplete("close");
                              return;
                          }
  
                          // pass empty string as value to search for, displaying all results
                          input.autocomplete("search", "");
                          input.focus();
                      });
                  },
  
                  destroy: function() {
                      this.input.remove();
                      this.button.remove();
                      this.element.show();
                      $.Widget.prototype.destroy.call(this);
                  }
              });
          })(jQuery);
  
          $(function() {
              /*start point value*/
              $("#pick").combobox({
                  change: function() {
                      alert("changed");
                  }
              });
              $("#toggle").click(function() {
                  $("#pick").toggle();
              });
              $("#pick").change(function() {
                  var start = this.value;
              });
  
              /*end point value*/
              $("#drop").combobox({
                  change: function() {
                      alert("changed");
                  }
              });
              $("#toggle").click(function() {
                  $("#drop").toggle();
              });
              $("#drop").change(function() {
                  var end = this.value;
              });
          });
  </code></pre>
  
  <p><strong>My HTML Code:</strong></p>
  
  <pre><code>&lt;div class="ui-widget"&gt;
          &lt;select id="pick"&gt;
              &lt;option value=""&gt;Select one...&lt;/option&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select id="drop"&gt;
              &lt;option value=""&gt;Select one...&lt;/option&gt;
              &lt;option value="11"&gt;11&lt;/option&gt;
              &lt;option value="12"&gt;12&lt;/option&gt;
              &lt;option value="13"&gt;13&lt;/option&gt;
              &lt;option value="14"&gt;14&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>