title: Prevent selecting same value in three different dropdowns
body: <p>I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;
      function updateSelect(changedSelect, selectId) {
        var otherSelect = document.getElementById(selectId);
        for (var i = 0; i &lt; otherSelect.options.length; ++i) {
          otherSelect.options[i].disabled = false;
        }
        if (changedSelect.selectedIndex == 0) {
          return;
        }
        otherSelect.options[changedSelect.selectedIndex].disabled = true;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;select id="select_1"  onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');"   name="indication_subject[]"&gt;
      &lt;option value="" selected="selected"&gt;a &lt;/option&gt;
      &lt;option value="1"&gt; Accounting&lt;/option&gt;
      &lt;option value="2"&gt; Afrikaans&lt;/option&gt;
      &lt;option value="3"&gt; Applied Information and Communication Technology&lt;/option&gt;
      &lt;option value="4"&gt; Arabic&lt;/option&gt;
      &lt;option value="5"&gt; Art and Design&lt;/option&gt;
      &lt;option value="6"&gt; Biology&lt;/option&gt;
      &lt;option value="7"&gt; Business Studies&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" &gt;
      &lt;option value="" selected="selected"&gt;a &lt;/option&gt;
      &lt;option value="1"&gt; Accounting&lt;/option&gt;
      &lt;option value="2"&gt; Afrikaans&lt;/option&gt;
      &lt;option value="3"&gt; Applied Information and Communication Technology&lt;/option&gt;
      &lt;option value="4"&gt; Arabic&lt;/option&gt;
      &lt;option value="5"&gt; Art and Design&lt;/option&gt;
      &lt;option value="6"&gt; Biology&lt;/option&gt;
      &lt;option value="7"&gt; Business Studies&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" &gt;
      &lt;option value="" selected="selected"&gt;a &lt;/option&gt;
     &lt;option value="1"&gt; Accounting&lt;/option&gt;
     &lt;option value="2"&gt; Afrikaans&lt;/option&gt;
     &lt;option value="3"&gt; Applied Information and Communication Technology&lt;/option&gt;
     &lt;option value="4"&gt; Arabic&lt;/option&gt;
     &lt;option value="5"&gt; Art and Design&lt;/option&gt;
     &lt;option value="6"&gt; Biology&lt;/option&gt;
     &lt;option value="7"&gt; Business Studies&lt;/option&gt;
    &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  
  
  <p>Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?</p>
  
  <p><a href="http://jsfiddle.net/x4E5Q/1/" rel="nofollow">http://jsfiddle.net/x4E5Q/1/</a></p>