title: Jquery dependant dropdown inside table
body: <p>I have a table . Inside each cells there are so many dropdownlists. The number of columns may vary. And the dropdownlist <strong>contents are same for each row</strong>. What i want is when I select a value from one dropdownlist ,that value must be removed from all other dropdownlist of <strong>the same row</strong>.</p>
  
  <p>Here is my table</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt; 
          &lt;tr class="row"&gt;
              &lt;td&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option 1 of row 1&lt;/option&gt;
                      &lt;option value="2"&gt;Option 2 of row 1&lt;/option&gt;
                      &lt;option value="3"&gt;Option 3 of row 1&lt;/option&gt;
                  &lt;/select&gt;               
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option 1 of row 1&lt;/option&gt;
                      &lt;option value="2"&gt;Option 2 of row 1&lt;/option&gt;
                      &lt;option value="3"&gt;Option 3 of row 1&lt;/option&gt;
                  &lt;/select&gt;               
              &lt;/td&gt;
  
              .....
              .....
          &lt;tr&gt;
          &lt;tr class="row"&gt;
              &lt;td&gt;
                  &lt;select&gt;
                      &lt;option value="a"&gt;Option a of row 2&lt;/option&gt;
                      &lt;option value="b"&gt;Option b of row 2&lt;/option&gt;
                      &lt;option value="c"&gt;Option c of row 2&lt;/option&gt;
                  &lt;/select&gt;               
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;select&gt;
                      &lt;option value="a"&gt;Option a of row 2&lt;/option&gt;
                      &lt;option value="b"&gt;Option b of row 2&lt;/option&gt;
                      &lt;option value="c"&gt;Option c of row 2&lt;/option&gt;
                  &lt;/select&gt;               
              &lt;/td&gt;
  
              .....
              .....
          &lt;tr&gt;
      &lt;/tbody&gt;   
  &lt;/table&gt;
  </code></pre>
  
  <p>So when I select the "Option 1 of row 1" that option from all other dropdown list must be removed. How can i achieve this using jquery?</p>
  
  <p>EDIT:</p>
  
  <p>And if the user select another value from already selected dropdown for the second time, the previous replaced option should be restored</p>
  
  <p>EDIT 2:</p>
  
  <p>I figured out how to do that for a row by using jquery id selector. How can i Iterate through all of the rows ie using class selector?Below is the single row code</p>
  
  <pre><code>$('#row_id td select').change(function(){
  
      var values = [];
      $('#row_id td select').each(function(){
          if(this.value.length &gt; 0)
              values.push(this.value);
      });
  
      $('#row_id td select option').each(function(){   
          if($.inArray(this.value, values) &gt; -1 &amp;&amp; !this.selected)                
              $(this).attr("disabled","disabled");
          else
              $(this).removeAttr("disabled");
      });
  
  });
   $('#row_id td select').change();//triggers initial change
  </code></pre>