title: jQuery on change only shows the selected option, remove/disable rest of them
body: <p>Target: From a select dropdown menu, if someone selects an option, disable/remove/hide the rest of the options on that dropdown menu.</p>
  
  <p>Here is the dropdown menu. If someone selects "1", the rest of options (2,3,4) will be removed/disabled/hide:</p>
  
  <pre><code>&lt;div class="abc"&gt;
    &lt;div class="xyz"&gt;
      &lt;select name="pqr" class="selectDropdown"&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;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JavaScript I tried to use:</p>
  
  <pre><code>$('.selectDropdown').on('change', function(e) {
      $(this).closest('.abc').children('.xyz').children('option:not(:selected)').prop('disabled', true);
  });
  </code></pre>
  
  <p>I know, the JavaScript is faulty here. Where did I make the mistake?</p>