title: How to remove selected drop down value in dynamically user can select or unselect HTML using Java script?
body: <p>Selected dropdown values are changed. I need dto ynamically select and unselect the dropdown. Also unselected vaules from whole values only comes in other dropdown. 
  Sample code : 
        $(document).ready(function () {</p>
  
  <pre><code>var hideOptions = function () {
      var $select = $('select');
      $select.find('option').show();
      $select.each(function () {
          var $this = $(this);
          var value = $this.val();
          var $options = $this.parents('table').find('select').not(this).find('option');
          var $option = $options.filter('[value="' + value + '"]');
          if (value) {
              $option.hide();
          }
      });
  }
  
  hideOptions();
  
  $('select').on('change', function () {
      hideOptions();
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>&lt;table style="width:40%" class="requiredField"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th&gt;Header&lt;/th&gt;
              &lt;th&gt;Mapping&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;dropdownA&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="email"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company" selected="selected"&gt;Company&lt;/option&gt;                    
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;dropdownB&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="Salutation"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company"&gt;Company&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;       
           &lt;tr&gt;
              &lt;td&gt;dropdownC&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="First_Name"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name" selected="selected"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company"&gt;Company&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;dropdownD&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="Last_Name"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company"&gt;Company&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;dropdownE&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="Gender"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company"&gt;Company&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;dropdownF&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="Gender"&gt;
                      &lt;option value=""&gt;Select&lt;/option&gt;
                      &lt;option value="Email_Address"&gt;Email_Address&lt;/option&gt;
                      &lt;option value="Salutation"&gt;Salutation&lt;/option&gt;
                      &lt;option value="First_Name"&gt;First_Name&lt;/option&gt;
                      &lt;option value="Last_Name"&gt;Last_Name&lt;/option&gt;
                      &lt;option value="Gender"&gt;Gender&lt;/option&gt;
                      &lt;option value="Company"&gt;Company&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Selected dropdown value changed after make this below the steps:</p>
  
  <ul>
  <li>select from <code>dropdownA</code> -> Company into Email_Address</li>
  <li>select from <code>dropdownB</code> -> Company</li>
  </ul>
  
  <p>Now we can see the <code>dropdownA</code> values are changed. But I am choosing <code>Email_Address</code> in <code>dropdownA</code>.</p>
  
  <p>Please correct me where I am wrong. Here's a demo: <a href="http://jsfiddle.net/ramalingam07/q8fcrxy9/" rel="nofollow">http://jsfiddle.net/ramalingam07/q8fcrxy9/</a></p>