Multiple Dependant Selects

by amindunited

HTML

<form name="someForm">
    <select id="sel_1" class="selecty">
        <option value="val_1">One</option>
        <option value="val_2">Two</option>
        <option value="val_3">Three</option>
        <option value="val_4">Four</option>
    </select>
    <hr/>
    
    <select id="sel_2" class="selecty">
        <option value="val_1">One</option>
        <option value="val_2">Two</option>
        <option value="val_3">Three</option>
        <option value="val_4">Four</option>
    </select>
    <hr/>
    
    <select id="sel_3" class="selecty">
        <option value="val_1">One</option>
        <option value="val_2">Two</option>
        <option value="val_3">Three</option>
        <option value="val_4">Four</option>
    </select>
    
</form>

JavaScript

$('.selecty').on('change', function(e) {
    var currentVal = $(this).val();
    var self = $(this);
    $('.selecty').each(function(i, obj){
        if ($(obj).attr('id') !==  $(self).attr('id') && (self.val() == $(obj).val())) {
            console.log("A Match");
            $(obj).val(null)
        }
    })
    
})