StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPrevent duplicate option on two checkboxes with same options
text
Body
copied!<p>I have 2 select box where I'm trying to avoid duplicated values (options) in those select box's. they all start with the same options list but after selecting option in <code>selectA</code> this option wont bee seen in <code>selectB</code> and vice versa. It should work if you select on <code>selectA-selectB-selectA</code>... etc. Every time one of the select box should be with <strong>n-1</strong> options.</p> <p>I did the next this.. it works but in mobile device the <code>.hide()</code> it's not working!</p> <pre><code> $('#selectA').bind('change', function () { $("#selectB option").show(); $("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").hide(); }); $('#selectB').bind('change', function () { $("#selectA option").show(); alert($(this).find('option:selected').attr('value')); $("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").hide(); }); } </code></pre> <p>Tried with class : <code>.hide()</code></p> <pre><code>.hide {display: none;} $('#selectA').bind('change', function () { $("#selectB option").removeClass('hide'); $("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").addClass('hide'); }); $('#selectB').bind('change', function () { $("#selectA option").removeClass('hide'); $("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").addClass('hide'); }); } </code></pre> <p>also dont work.</p> <p>tried this: </p> <pre><code> $('#selectA').on('change', function() { $('option:not(:selected)', this).clone().appendTo($('#selectB').empty()); }); $('#selectB').on('change', function() { $('option:not(:selected)', this).clone().appendTo($('#selectA').empty()); }); </code></pre> <p>but the problem here is if we start with 5 options for example then after selecting option in <code>selectA</code> I'll get <strong>n-1</strong> in <code>selectB</code>,after selecting option in <code>selectB</code> I'll get <strong>n-2</strong> in <code>selectA</code> and so on... in the end you get empty list.</p> <p>any ideas how to fix it?</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