Databases
StackOverflow2013
Postsdbo
POSharing options between selects (using HTML and jQuery)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSharing options between selects (using HTML and jQuery)
    text
    copied!<p>Looked through many answers, but couldn't find one solving this. I have four (potentially n-number of) <code>&lt;select&gt;</code> lists, with an equal number of <code>&lt;option&gt;</code> possibilities in each, like this:</p> <pre><code>&lt;label&gt;Pick a:&lt;/label&gt; &lt;select class="colorassign"&gt; &lt;option value="1" selected="selected"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;option value="4"&gt;Four&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Pick b:&lt;/label&gt; &lt;select class="colorassign"&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2" selected="selected"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;option value="4"&gt;Four&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Pick c:&lt;/label&gt; &lt;select class="colorassign"&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3" selected="selected"&gt;Three&lt;/option&gt; &lt;option value="4"&gt;Four&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Pick d:&lt;/label&gt; &lt;select class="colorassign"&gt; &lt;option value="1"&gt;One&lt;/option&gt; &lt;option value="2"&gt;Two&lt;/option&gt; &lt;option value="3"&gt;Three&lt;/option&gt; &lt;option value="4" selected="selected"&gt;Four&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Notice that each available option within the lists are selected (and each list have the exact same <code>&lt;option&gt;</code>s). Now, these should automatically respond to change by not allowing any two lists to have the same selected value. Using jQuery, I want to make it so that when I select for example <em>Four</em> in the first list, I want the fourth list to automatically set <em>One</em> (the only available free option between the lists) to be set to selected.</p> <p>Could anyone give a hand with this?</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