Question

I have 10 dropdown menus, each with 30 or so options. I’m trying to prevent the same value being selected in any of the menus by using JQuery to compare each select value to its siblings. Here’s my code, but it ain’t workin:

$('#select1').change(function() {
    if ($(this).val() == $(this).siblings().val()) {
        alert("OK");
    }
});

As you can see I’m trying to compare the value of #select1 against all it’s siblings by using $(this).siblings().val(). Can’t figure out why this won’t work.

Answer 1

I think siblings return a list of elements not a single item, so you need to run a loop

$('#select1').change(function() {

    var $select = $(this);

    $(this).siblings().each(function(index){

        if ($(this).val() == $select.val()) {
            alert('ok');
        }
    }
});