JSFiddle - React, Tailwind, and code Playground
HTML
<select id="Questions1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="Questions2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
JavaScript
// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option').each(function() {
$this = $(this);
options.push({ Name: $this.text(), Value: $this.val() });
});
// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
$previouslySelected = $select.find(':selected');
$select.empty();
for (var i = 0; i < options.length; i++) {
var opt = options[i];
if (opt.Value != $selOption.val()) {
if ($previouslySelected.val() == opt.Value) {
$select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
}
else {
$select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
}
}
}
}
// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');
$Questions1.change(function() {
rebuildSelect($(this), $Questions2);
});
$Questions2.change(function() {
rebuildSelect($(this), $Questions1);
});
// Go ahead and run the function once to remove the default entry from the second box
rebuildSelect($Questions1.find(':selected'), $Questions2);