<select id="first_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>

<select id="second_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>

<select id="third_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>

<select id="fourth_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>

<script>
$(document).ready(function(){


// Enumerate all lists
var Lists = [
document.getElementById("first_choice"),
document.getElementById("second_choice"),
document.getElementById("third_choice"),
document.getElementById("fourth_choice"),

],
nbLists = Lists.length;
// Binds change events to each list
for(var iList = 0; iList < nbLists; iList++) {
Lists[iList].onchange = RemoveItems(iList);
}


function RemoveItems(iList) {
return function() {
var value = [];

// Add the selected items of all previous lists including the one changed
for(var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);


// Hide in all succeeding lists these items
for(var kList = iList + 1; kList < nbLists; kList++)
HideItems(kList, value);
}
}


// Hide items selected in previous lists in all next lists
function HideItems(iList, value) {
var nbOptions = Lists[iList].options.length,
nbValues = value.length,
found;

if(nbValues === 0) return;

for(var iOption = 0; iOption < nbOptions; iOption++) {
// Find if this element is present in the previous lists
found = false;
for(var iValue = 0; iValue < nbValues; iValue++) {
if(Lists[iList].options[iOption].text === value[iValue]) {
found = true;
break;
}
}

// If found, we hide it
if(found) {
Lists[iList].options[iOption].style.display = "none";
Lists[iList].options[iOption].selected = "";
}
// else we un-hide it (in case it was previously hidden)
else
Lists[iList].options[iOption].style.display = "";
}
}

});
</script>