JSFiddle - React, Tailwind, and code Playground
HTML
<table id="TheTable">
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi">
<option value="#" selected="selected">Rank...</option>
<option value="1">1</option>
<option value="2">2</option>
<option...
JavaScript
var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];
$(document).ready(function () {
$('#TheTable').find('select').change(function () {
var TheSelectedValue = parseInt($(this).val(), 10);
var TheSelectID = $(this).prop('id');
var TheHTML = "";
for (var i = 0; i < SelectOptions.length; i++) {
if (SelectOptions[i] !== TheSelectedValue) {
TheHTML = TheHTML + '<option value="';
TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
}
}
$('#TheTable').find('select').each(function () {
if ($(this).prop('id') !== TheSelectID) {
$(this).html(TheHTML);
}
});
});
});