title: Remove existing selected option on another Select Box
body: <p>My problem is that I have multiple (2 or more) select box and the selected data is from a JSON file. </p>
  
  <p>It should be like this. </p>
  
  <p>So, for instance I have 2 select box and the data for those select box is say 'a' and 'c'. So the Select box basically looks like this</p>
  
  <pre><code>&lt;select id ="box1"&gt;
  &lt;option value='a'selected&gt;a&lt;/option&gt;
  &lt;option value='b'&gt;b&lt;/option&gt;
  &lt;option value='c'&gt;c&lt;/option&gt;
  &lt;/select&gt; 
  
  
  &lt;select id ="box2"&gt;
  &lt;option value='a'&gt;a&lt;/option&gt;
  &lt;option value='b'&gt;b&lt;/option&gt;
  &lt;option value='c' selected&gt;c&lt;/option&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p>but I dont want this to happen.</p>
  
  <p>I want to restrict the user from selecting option 'a' on 'box2' and vice versa, restrict the user from selecting option 'c' on 'box1'</p>
  
  <p>In other words, Users can't pick 'c' on box1 and also can't pick 'a' on box2.  The only time they can pick option 'c' on box1 is if they change the selected value of box2.</p>