强制从三个 SELECT 框中进行唯一选择答案

【问题标题】：Force unique selections from three SELECT boxes强制从三个 SELECT 框中进行唯一选择
【发布时间】：2015-04-30 11:23:08
【问题描述】：

我有三个简单的 SELECT 框：

<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 个选项（按顺序，即第一个选择是最喜欢的，第二个选择是第二个最喜欢的，依此类推）。

我想要实现的是，当学生选择“TABLE TENNIS CAMP”时，它会将其他 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');
        });
    });

});

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

我考虑过存储一些 jQuery data() 或关于三个 SELECT 框的状态的数组，但我只是不够聪明，无法弄清楚如何检查这些状态并相应地更新 SELECT 框。我也不确定这是否有必要；我怀疑这里有一个相对简单的答案。

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如你所说，你可以使用data 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

【讨论】：