I have three list in my form where having same option while loading the form.
But my requirement is : as soon as user selects the first option it should be removed from second list and as user gives second option it should be removed from third list. So there are no chances to have duplicate choice.
<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status;
document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="B">Yellow</option>
</select>
Here's jQuery event change on select boxes, which will disable selected option in other selects but not in selected one.
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
And after that will restart options that are disabled but not selected.
--I've also seted value "Y" for yellow.
$(function(){
$('select').on('change', function(){
var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
// restart options that are disabled, but not selected anymore.
var selectedElements = "";
$('select option:selected').each(function(k,v){
selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]';
});
$('select option:disabled').not(selectedElements).prop('disabled', false);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
<label>First Pref : </label>
<select name="Colors option 1">
<option value="">Select 1st</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
<option value="">Select 2nd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref : </label>
<select name="Colors option 3">
<option value="">Select 3rd</option>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
<option value="Y">Yellow</option>
</select></div>