在其他选择的基础上使用Javascript更改Select标记

我不确定我所做的是否可行，但我会尝试解释一下，也许我们可以找到接近它的东西

我有许多HTML表单>10中的select标记，具有完全相同的选项。选项的数量也很高，超过20个

这里有一个例子

<select>
<option>A1</option>
<option>A2</option>
<option>A3</option>
<option>A4</option>
<option>B1</option>
<option>B2</option>
<option>B3</option>
......
</select>

我想创造一些，如果这个然后那个的情况

更简单的方法是，如果用户选择一个选项，那么该选项将从所有其他select标记中删除。 另一个是，如果有人在两个不同的选择标签中选择同一团队的两个选项，例如[A1、A2、A3]，那么第三个选项也将从其他选项中删除。 我相信我可以用很多很多的if语句来实现，但我想的是更简单的东西

例如，我可以与团队一起创建4-5个列表，并将案例更改为：

如果该选项在列表中，则将其从所有其他选项中删除 如果团队中有2个或3个选项，则在其他选项中删除该团队中的所有其他选项。 如果你认为除了下拉菜单还有其他方法，我可以改变它，如果它是一个更好的选择

---

编辑：如果有人想增加50分奖励来吸引更多的答案，请随意。我没有足够的声誉去做这件事。

这里是jquery的一个例子

html

javascript

var teams_counter = {};
var prev_value, prev_team;

$("select").each(function(i,sel){
    sel.selectedIndex = -1;
    $(sel).children().each(function(j,opt){
        teams_counter[opt.className] = 0;
    });
});

$("select").focus(function(evt){
    prev_value = evt.target.value;
    var opt = evt.target.selectedOptions[0];
    prev_team = opt ? opt.className : undefined;
});

$("select").change(function(evt){
    var sel_team = evt.target.selectedOptions[0].className;
    teams_counter[sel_team] += 1;
    if(teams_counter[sel_team] >= 2){
        //$("." + sel_team).hide(); // this is not good.
        $("select").filter(function(){
            return !this.selectedOptions[0] || this.selectedOptions[0].className != sel_team;
        }).find("." + sel_team).hide();
    };
    if(prev_team){
        teams_counter[prev_team] -= 1;
        if(teams_counter[prev_team] < 2){
            $("." + prev_team).show();
        }
    }
    $("option[value='" + evt.target.value + "']").hide();
    $("option[value='" + prev_value + "']").show();
});

---

第一个条件和第二个条件不矛盾吗？如果您删除了一个团队，那么第二个条件将永远不会发生选择同一团队中的两个？删除该团队的选项。例如，如果我选择A1，那么A2、A3和A4将是唯一可用的。若我从一个团队中选择了2个，那个么所有的团队都将被删除。在JSFIDLE上有些东西不能正常工作。当我选择一个选项时，它在其他下拉列表中仍然处于活动状态。对不起，我只看到我的代码在Chrome中工作。所选选项在firefox或ie中似乎不可用。我将修复lator。

var teams_counter = {};
var prev_value, prev_team;

$("select").each(function(i,sel){
    sel.selectedIndex = -1;
    $(sel).children().each(function(j,opt){
        teams_counter[opt.className] = 0;
    });
});

$("select").focus(function(evt){
    prev_value = evt.target.value;
    var opt = evt.target.selectedOptions[0];
    prev_team = opt ? opt.className : undefined;
});

$("select").change(function(evt){
    var sel_team = evt.target.selectedOptions[0].className;
    teams_counter[sel_team] += 1;
    if(teams_counter[sel_team] >= 2){
        //$("." + sel_team).hide(); // this is not good.
        $("select").filter(function(){
            return !this.selectedOptions[0] || this.selectedOptions[0].className != sel_team;
        }).find("." + sel_team).hide();
    };
    if(prev_team){
        teams_counter[prev_team] -= 1;
        if(teams_counter[prev_team] < 2){
            $("." + prev_team).show();
        }
    }
    $("option[value='" + evt.target.value + "']").hide();
    $("option[value='" + prev_value + "']").show();
});