0

$('.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?

3
  • Please provide all relevant code in an minimal reproducible example in the question itself, not on a third-party site. Feb 1, 2017 at 23:31
  • Post your code here in a Stack Snippet instead of using jsfiddle. And don't try to get around the rule that a question that links to jsfiddle has to have code in it.
    – Barmar
    Feb 1, 2017 at 23:37
  • Sorry for that...i updated quesrtion with code snipped
    – John
    Feb 1, 2017 at 23:40

2 Answers 2

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.

4
  • Thanks...this works as expected..but i have two select boxes when page loads...then user clicks on button add new select box so i need to do that with all select box that is added dynamically..could you please rewrite code to do this on all dynamically added select boxes? i im using when adding dynamic box id="select3" id="select4" etc
    – John
    Feb 1, 2017 at 23:50
  • Using siblings i can get with multiple select boxes..but attached onchange event for siblings does not work in my example..so if someone could help...thanks
    – John
    Feb 1, 2017 at 23:58
  • @John, please check the edits and the suggestions. Hopefully that should work. Cheers! :) Feb 2, 2017 at 0:24
  • Thanks...that works excellent..you save my day. I lost two weeks trying to accomplish this and then i decided to ask here on stackoverflow..thanks again Dhruv Saxena..you save my project to go in development where i stoped...thanks...and cheers
    – John
    Feb 2, 2017 at 0:30
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.