title: Disable 2nd dropdown option based on first dropdown
body: <p>I have two dynamic dropdowns but both dropdown's value and options are same. What I want that if user select 'apple' from first dropdown then the second dropdown's apple option will be disabled (using javascript). In short user can not select same value from both.</p>
  
  <pre><code>//first drop down
  &lt;select name="fruit1"&gt;
      &lt;option value="1"&gt;Apple&lt;/option&gt;
      &lt;option value="2"&gt;Mango&lt;/option&gt;
  &lt;/select&gt;
  
  //second dropdown  
  &lt;select name="fruit2"&gt;
      &lt;option value="1"&gt;Apple&lt;/option&gt;
      &lt;option value="2"&gt;Mango&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have tried with jQuery:</p>
  
  <pre><code>function witness()
  {
      var op=document.getElementById("witness1").value;
      $('option[value='+op+']').prop('disabled', true);
  }
  </code></pre>
  
  <p>But with this both dropdown's value are disabled and if I select mango then apple will not enabled it remains disabled. I know I did not pass id so both dropdown value are disabled but where should i pass ?</p>
  
  <p>If user select apple then in second dropdown apple will be disabled, I want to do this using Javascript or jQuery.</p>