disabling select box attributes in multiple boxes

by santosh_patnala

HTML

<select name="areaID_1" class="area_select">
	<option value=""> </option>
    <option value="value1">Value One</option>
    <option value="value2">Value Two</option>
    <option value="value3">Value Three</option>
    <option value="value4">Value Four</option>
</select>
<select name="areaID_2" class="area_select">
	<option value=""> </option>
    <option value="value1">Value One</option>
    <option value="value2">Value Two</option>
    <option value="value3">Value Three</option>
    <option value="value4">Value Four</option>
</select>
<select name="areaID_3" class="area_select">
	<option value=""> </option>
    <option value="value1">Value One</option>
    <option value="value2">Value Two</option>
    <option value="value3">Value Three</option>
    <option value="value4">Value Four</option>
</select>

JavaScript

$(function() {
	$(document).on('change', '.area_select', function (e) {
        generateSelectedAreas();			
	});

    function generateSelectedAreas()
    {
        var selectedValues=[];
        
        //enable all options, otherwise they overlap and cause probl
        $('.area_select option').each(function () {
            $(this).prop('disabled', false);
        });
        
        $('.area_select option:selected').each(function () {
           var select = $(this).parent(),
           optValue = $(this).val();
            
           if($(this).val()!=''){
               $('.area_select').not(select).children().filter(function(e){
                   if($(this).val()==optValue)
                       return e
               }).prop('disabled', true);
           }
        });
    }
});