StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong><em>Live demo:</em></strong> <a href="http://jsfiddle.net/dZqEu/" rel="noreferrer">http://jsfiddle.net/dZqEu/</a></p> <pre><code>$('select').change(function() { var value = $(this).val(); $(this).siblings('select').children('option').each(function() { if ( $(this).val() === value ) { $(this).attr('disabled', true).siblings().removeAttr('disabled'); } }); }); </code></pre> <hr> <p>You may prefer this version of the code: </p> <pre><code>$('select').change(function() { $(this) .siblings('select') .children('option[value=' + this.value + ']') .attr('disabled', true) .siblings().removeAttr('disabled'); }); </code></pre> <p><strong><em>Live demo:</em></strong> <a href="http://jsfiddle.net/dZqEu/2/" rel="noreferrer">http://jsfiddle.net/dZqEu/2/</a></p> <p>Note that this second version is an one-liner (one line of code) but I formatted it to be more readable. I like this second version better.</p> <hr> <p>Also, note that my code assumes that those two SELECT boxes are DOM sibling elements. If that's not your case, then this code - <code>$(this).siblings('select')</code> - will not work for you, and you will have to use jQuery's traversal methods to jump to the other SELECT box. </p> <p>In the worst-case scenario - when the SELECT boxes are far apart in the DOM tree, and traversing would not be efficient - you can just assign ID attributes to them and use this code to select the other box: </p> <pre><code>$('#select1, #select2').not(this) </code></pre> <p><strong><em>Live demo:</em></strong> <a href="http://jsfiddle.net/dZqEu/3/" rel="noreferrer">http://jsfiddle.net/dZqEu/3/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload