John John - 4 years ago 146
jQuery Question

jQuery siblings does not select options inside div?



$('.input-group select').change(function() {

var value = $(this).val();
alert($('.input-group select').siblings('select').children('option').length);
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group 1">
<select name="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 name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</div>





I have the following code and would like to select options inside select so when user select in first value A that this value is disabled in second select box and inverse.

I found siblings of jQuery but i im unable to select it in div...where i im doing wrong?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download