javascript - Selecting the last value from the dropdown and disable it for other dropdowns

Question

I have 3 drop-downs with values: Select, One, Two, Three and following is the HTML.

<select class="dpdown" id="box1">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box2">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box3">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 

Conditions

1. First of all the jQuery function should store the current values from all the boxes.
2. If the user select One from #box1, then it (One) should be disabled from all other boxes, and if Two is selected from #box1 again, then Two is disabled from other boxes and One gets enabled. i.e. the last value is disabled not all the values.
3. Also to be noted that the user can select from any of the dropdowns whether it is box1/box2 or box3.

EDIT

$(document).ready(function(){
    $('#box1').data('pre', $(this).val()); // added this line to get the pre value.
    $("select").change(function(e){
        var id = $(this).attr("id");
        var before_change = $(this).data('pre');
        alert(before_change); // alert shows blank values
    });
});

I want to do this with jQuery. Please help.

Answer 1

Try something like this:

var $selects = $('.dpdown').change(function() {
    var val = $(this).val();
    $selects
        .children().prop('disabled', false)
        .end().not(this)
        .find('[value="' + val + '"]').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box2">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box3">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</select>