javascript - 从三个 SELECT 框中强制进行唯一选择

Question

我有三个简单的选择框:

<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>

如您所见，它们是具有不同 ID 的相同 SELECT(就附加的 OPTIONS 而言)。

这些下拉菜单供学生选择他们的 3 个首选(按顺序，即第一个选择是最喜欢的，第二个选择是第二个最喜欢的，依此类推)。

我想要实现的是，当学生选择“乒乓球训练营”时，它将其他 SELECT 中的相同选项设置为“禁用”。

我可以使用以下代码做得很好:

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

});

我无法理解的是当用户取消选择时如何重新启用相关选项。

我考虑过存储一些 jQuery data() 或关于三个 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