Question

我有三个简单的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个首选（顺序，即第一选择是最喜欢的，第二选择是第二选择，等等）。

我想要实现的是当学生选择“乒乓球赛”时，它会将其他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。

我考虑过存储一些关于三个SELECT框状态的jQuery数据（）或数组，但是我还不够明白如何检查这些状态并相应地更新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

强制从三个SELECT框中选择唯一的选项

1 个答案: