javascript - 根据其他选择使用 Javascript 更改 Select 标签

Question

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

我在 HTML 表单中有许多选择标签 (>10)，它们具有完全相同的选项。选项数量也很高 (>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 标签中选择了同一“团队”的 2 个选项(例如 [A1,A2,A3])，那么第三个选项也会从其他选项中删除。

我相信我可以用很多很多 if 语句来做到这一点，但我正在考虑更简单的事情。

例如，我可以创建 4-5 个包含“团队”的列表，并将案例更改为:

• 如果该选项在列表中，则将其从所有其他选项中删除
• 如果有 2 或 3 个选择(基于团队)，则从该团队中删除其他选择中的所有其他人。

如果您认为除了下拉菜单之外还有其他方法可以做到这一点，如果这是更好的选择，我可以更改它。

编辑:如果有人想添加赏金(50 点)来吸引更多答案，请随意这样做。我没有足够的声誉来做这件事。

Answer 1

这是一个使用 jquery 的示例。

html

<select>
    <option class="A" value="A1">A1</option>
    <option class="A" value="A2">A2</option>
    <option class="A" value="A3">A3</option>
    <option class="A" value="A4">A4</option>
    <option class="B" value="B1">B1</option>
    <option class="B" value="B2">B2</option>
    <option class="B" value="B3">B3</option>
</select>
<select>
    <option class="A" value="A1">A1</option>
    <option class="A" value="A2">A2</option>
    <option class="A" value="A3">A3</option>
    <option class="A" value="A4">A4</option>
    <option class="B" value="B1">B1</option>
    <option class="B" value="B2">B2</option>
    <option class="B" value="B3">B3</option>
</select>
<select>
    <option class="A" value="A1">A1</option>
    <option class="A" value="A2">A2</option>
    <option class="A" value="A3">A3</option>
    <option class="A" value="A4">A4</option>
    <option class="B" value="B1">B1</option>
    <option class="B" value="B2">B2</option>
    <option class="B" value="B3">B3</option>
</select>

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