title: Refresh/reload a dropdown list after removing values with jQuery?
body: <p>The following code removes dropdown list values based on text entered in a textbox.</p>
  
  <p><a href="http://jsfiddle.net/o6ftr3ny/1/" rel="nofollow"><h1>FIDDLE DEMO</h1></a></p>
  
  <p><strong>JQUERY</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ddl = ('#ddl'),
    txt = ('#txt');
  
  $(txt).change(function() {   
    var x = $(txt).val(),
      li = $(ddl).html();
  
    if (x.length != 0) {
      $(ddl).html(li);
      $(ddl + ' :not([value="' + x + '"])').remove();
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input id="txt" type="text" placeholder="Enter a number..."&gt;
  
  &lt;select id="ddl"&gt;
    &lt;option value="0" selected="selected"&gt;Select...&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;option value="5"&gt;5&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>QUESTION</h2>
  
  <p>How to restore dropdownlist values back to initial state when a new value is entered into the textbox?</p>
  
  <p>I have been attempting to use:</p>
  
  <pre><code>$(ddl).selectmenu("refresh"); 
  </code></pre>
  
  <p>but this stops the script from working as expected.</p>