根据用户选择/选项可用性切换选择框错误状态

Toggling select box error states based on user selections/option availability

本文关键字：选择 错误 状态 选项 用户 可用性      更新时间：2023-09-26

如果用户基于可用性为1 availableSessions重复选择，则应突出显示选择框。我的问题是，我不知道如何删除亮点，如果用户选择不同的选项来删除重复?理想情况下，我想单独删除错误，每次选择的情况下，用户已重复多次?基本上，用户应该能够继续复制，但会被错误高亮警告。

这是onSessionSelect方法现在处理这个逻辑

onSessionSelect: function(event) {
        var $currentTarget  = $(event.currentTarget),
            classId = $currentTarget.val(),
            availableSessions = this.model.get('availableSessions');

        var selectedOption = this.$el.find('.js-sessions-select option[value="'+classId+'"]:selected'),
            len = selectedOption.length;       
        if(len > availableSessions) {
            selectedOption.parent().addClass('error');
        } else {
            selectedOption.parent().removeClass('error');
        }
    }

下面是用于填充每个选择选项

的数据示例
var availableClassesData = [{
    "id": 34,
    "name": "Core Evo"
}, {
    "id": 686,
    "name": "Core Body Workout"
}, {
    "id": 870,
    "name": "Boxercise"
}, {
    "id": 1345,
    "name": "Rapid Circuits"
}];

这里是演示http://jsfiddle.net/kyllle/u3tdtdhz/

您已经意识到，您无法在仅更改了最后一个选项的上下文中维护所有元素的正确高亮状态。不要将错误逻辑限制在最后选择的选项，而是在会话选择开始时清除所有错误，并编写一些代码来突出显示所有重复的选项。

相关文章：