CODEWITHSUNDEEP
javascriptjquery
turbonerd
turbonerd

Reputation: 1306

Force unique selections from three SELECT boxes

I have three simple SELECT boxes:

<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, they're the same SELECT (in terms of attached OPTIONS) with a different ID.

These drop-downs are for students to pick their 3 preferred choices (in order, i.e. 1st choice is favourite, 2nd choice is 2nd favourite and so on).

What I'm trying to achieve is when a student selects "TABLE TENNIS CAMP", it sets that same option in the other SELECTs to "disabled".

I can do that well enough 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 can't get my head around is how to re-enable the relevant OPTIONs when a user un-selects a choice.

I've thought about storing some jQuery data() or an array about the states of the three SELECT boxes but I'm just not bright enough to figure out how to then check those states and update the SELECT boxes accordingly. I'm also not sure if that's necessary; I suspect there's a relatively straightforward answer here.

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

Upvotes: 4

Views: 59

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

As you said, you can use the data api to store the previous selection

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

Demo: Fiddle

Upvotes: 5

Related Questions