Make a unique selection of three SELECT blocks

Question

I have three simple SELECT blocks:

<select class="select_choice" id="1">
    <option value="0">
        -- Please select
    </option>

    <option data-cost="15" value="6">
        Leisure Sports £15
    </option>

    <option data-cost="0" value="1">
        Three Days at the Movies £0
    </option>

    <option data-cost="10" value="3">
        Table Tennis Camp £10
    </option>

    <option data-cost="6" value="4">
        Beach Sports £6
    </option>

    <option data-cost="22" value="5">
        You CAN Teach an Old Dog new Tricks £22
    </option>
</select><select class="select_choice" id="2">
    <option value="0">
        -- Please select
    </option>

    <option data-cost="15" value="6">
        Leisure Sports £15
    </option>

    <option data-cost="0" value="1">
        Three Days at the Movies £0
    </option>

    <option data-cost="10" value="3">
        Table Tennis Camp £10
    </option>

    <option data-cost="6" value="4">
        Beach Sports £6
    </option>

    <option data-cost="22" value="5">
        You CAN Teach an Old Dog new Tricks £22
    </option>
</select><select class="select_choice" id="3">
    <option value="0">
        -- Please select
    </option>

    <option data-cost="15" value="6">
        Leisure Sports £15
    </option>

    <option data-cost="0" value="1">
        Three Days at the Movies £0
    </option>

    <option data-cost="10" value="3">
        Table Tennis Camp £10
    </option>

    <option data-cost="6" value="4">
        Beach Sports £6
    </option>

    <option data-cost="22" value="5">
        You CAN Teach an Old Dog new Tricks £22
    </option>
</select>

As you can see, this is the same SELECT (in terms of the attached options) with a different identifier.

These drop-down lists are intended for students to select their 3 preferred options (so that, for example, the 1st choice is a favorite, the 2nd option is a 2nd favorite, etc.).

What I'm trying to achieve is when a student selects “TABLE TENNIS CAMP”, he sets the same parameter in other SELECTs to “disabled”.

I can do it quite well using the following code:

$(document).ready(function() {

    $('.select_choice').change(function() {
        var $mc = $('span#maximumCost');
        var maximumCost = parseInt( $mc.text() );

        var $o = $(this).find(":selected");

        var clickedSelectID = $(this).attr("id");

        var obj = {};
        obj.id = $o.val();
        obj.selectID = clickedSelectID;
        obj.name = $o.text().split(/\u00A3/g)[0];
        obj.cost = $o.data("cost");

        $('#choice-' + clickedSelectID).text(obj.name);
        $('#choice-' + clickedSelectID).data("challenge_id", obj.id);

        if( obj.cost > maximumCost )
            $mc.text(obj.cost);

        $('.select_choice').not(this).each(function() {
            $(this).find('option[value="' + obj.id + '"]').css('background-color', 'red');
        });
    });

});

What I cannot understand is how to enable the corresponding OPTIONS again when the user selects a choice.

jQuery() SELECT, , , SELECT. , ; , .

jsFiddle: http://jsfiddle.net/Lqu4c0eb/1/

Answer 1

, api

    $('.select_choice').not(this).find('option[value="' + obj.id + '"]').prop("disabled", true);

    $('.select_choice').not(this).find('option[value="' +$(this).data('prev') + '"]').prop("disabled", false);

    $(this).data('prev', obj.id)

: Fiddle