Disable one option in select element and enable the others

Question

I have two select element with same options. I want to disable the option if its already selected in other select element.

Here is my two select:

<select class="form-control col-md-12" name="student1" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

<select class="form-control col-md-12" name="student2" required>
    <option value="" disabled selected>Select Student</option>
    <option value="0">John</option>
    <option value="1">Paul</option>
</select>

Here's example of my javascript(but this will not do)

$("select[name=student1]").change(function(){
    if ( $(this).val() == 'John' ) {
        $("select[name=student2]")
        .children('option[value=' + this.val() + ']')
        .attr('disabled', true);
    }
});

I know how to do it using if statement and disable and enable the option element but I will use database on this one and I want to know the easiest way to do this or if I can just disable one and automatically enable the others.

If I just put the disable then I change the selected option the option that got disabled will stay disabled and I need to enable them all to secure that they're enable.

I hope you get it. Any help will be appreciated!

EDIT

I will use database with value of option this is just example so I want to know how to enable and disable them without knowing what is the value.

Answer 1

I guess that you asking for this:

 $(function() { // target selects $selects = $("select"); // listener to change value $selects.on("change", function() { let $sibling = $(this).siblings("select"); // setting all attrs disabled of sibling to false $sibling.find("option").prop("disabled", false); // setting attr disabled according the current value to true $sibling.find(`option[value="${$(this).val()}"]`).prop("disabled", true); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <select class="form-control col-md-12" name="student1" required> <option value="" disabled selected>Select Student</option> <option value="0">John</option> <option value="1">Paul</option> </select> <select class="form-control col-md-12" name="student2" required> <option value="" disabled selected>Select Student</option> <option value="0">John</option> <option value="1">Paul</option> </select> </div> 

Answer 2

Your problem is still not very clear. But I assume it's that you're not aware of the values and you want to keep the selects in sync. You can try this

 $("select[name='student1']").change(function() { const currentVal = $(this).val(); $("select[name='student2'] option").each(function() { const student2Val = $(this).val(); if (student2Val === currentVal) { $(this).attr('disabled', true); $(this).attr('selected', true); } else { $(this).attr('disabled', false); $(this).attr('selected', false); } }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control col-md-12" name="student1" required> <option value="" disabled selected>Select Student</option> <option value="0">John</option> <option value="1">Paul</option> </select> <select class="form-control col-md-12" name="student2" required> <option value="" disabled selected>Select Student</option> <option value="0">John</option> <option value="1">Paul</option> </select> 

You will have to do the syncing from select2 to select1 yourself.