JSFiddle - React, Tailwind, and code Playground
HTML
<select name="selectbox1" class="selbox">
<option value="">Please Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select><br /><br />
<select name="selectbox2" class="selbox">
<option value="">Please Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select><br /><br />
<select name="selectbox3" class="selbox">
<option value="">Please Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
JavaScript
$(function(){
$('.selbox').change(function(){
var val = $(this).val();
var sel = $(this);
if(val != "")
{
if(sel.data("selected"))
{
var oldval = sel.data("selected");
sel
.siblings('select')
.append($('<option/>').attr("value", oldval).text(oldval));
}
sel
.data("selected", val)
.siblings('select')
.children('option[value=' + val + ']')
.remove();
}
else if(val == "")
{
if(sel.data("selected"))
{
var oldval = sel.data("selected");
sel
.removeData("selected")
.siblings('select')
.append($('<option/>').attr("value", oldval).text(oldval));
}
}
});
});