jQuery siblings does not select options inside div?

Answer 1

Please try this...
An assumption made here is that there are only two select boxes in the HTML that this functionality should be designed for:

$ = jQuery;
$("#select1, #select2").on("change", function() {
     if($(this).attr("id") == "select1"){
        src = "#select1"; target="#select2";
     }
     else{
        src = "#select2"; target="#select1";
     }

     $(target).children().removeAttr("disabled");
     $(target).find("option[value="+$(src).val()+"]").attr("disabled", "disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group 1">
    <select id="select1">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

<div class="input-group 2">
    <select id="select2">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

EDIT
Updated the jQuery to address the concern expressed in the comments section. An assumption made here is that the new select boxes will be added in a similar fashion to the existing ones, i.e. under a new <div class="input-group">. Therefore, according to the given HTML layout the updated jQuery would be:

$("select").on("change", function(){
    $(this).parent().siblings().find("option").removeAttr("disabled");
    $(this).parent().siblings()
           .find("option[value="+$(this).val()+"]").attr("disabled", "disabled");
});

Suggestions:

• Wrap the above code inside a function and call that function whenever a new select box is added dynamically - again, it is assumed that it'll be added under <div class="input-group"> and that there will be a parent <div> right above the first such element.

• Change <option>No Match</option> to <option value="0">No Match</option> or alike.

Answer 2

Here i im testing this with 4 select box...and i noticed when i select first two box value that values in select box 3 & 4 does not disable selections from 1 & 2 select box...i see this in script when i add 10 items...for first two select box it works as expected but for others 3 & 4 does not...here is code that posted above Dhruv Saxena..if someone could please see why this does not work as expected...for example this need to work as described:

Select Box #1 Test Selected Select Box #2 Test 2 Selected & Test is disabled (update Select Box #1 Test 2 disabled) Select Box #3 Test 3 Selected & Test & Test2 disabled (update Select Box #1 Test 2 & Test3 disabled & update Select Box #2 Test 3 disabled)

And so on..so the qoal is to when item is selected in current select box to disable this item in all other select boxes...

$("select").on("change", function(){
    $(this).parent().siblings().find("option").removeAttr("disabled");
    $(this).parent().siblings()
           .find("option[value="+$(this).val()+"]").attr("disabled", "disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group 1">
    <select id="1">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 2">
    <select id="2">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 3">
    <select id="3">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>

<div class="input-group 4">
    <select id="4">
        <option>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
        <option value="4">Test 3</option>
    </select>
</div>