Question

我不确定我该做什么是可行的，但我会尝试解释它，也许我们可以找到一些接近它的东西。

我在HTML表单（＆gt; 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>

我想创建一些＆＃34;如果这样那么＆＃34;案例。

更简单的是＆＃34;如果用户选择一个选项＆＃34;，则此选项将从所有其他选择标签中删除。
另一个是如果有人选择同一个＆＃34;团队＆＃34; （例如[A1，A2，A3]）在两个不同的选择标签中，第三个选项也将从其他标签中删除。

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

例如，我可以使用＆＃34; team＆＃34;创建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();
});

在其他选项的基础上使用Javascript更改Select标签

1 个答案: