javascript - 表单验证多维选择框

Question

这是作品的截图。

颜色下拉菜单有子颜色。现在颜色的名称是color[]。对于这种情况，您可以看到有 3 种颜色。第一种颜色有 1 个子颜色，第 2 种颜色有 3 个子颜色，颜色 3 有 1 个子颜色

我需要检查许多验证。

1. 任何颜色，子颜色不应该是“选择”（在图像中，所有下拉菜单都被选中）
2. 所有 3 种颜色的父百分比（第一种颜色在图像中缺少百分比框，但在现场）应该正好是 100
3. 每种颜色的子百分比也应该是精确的 100%，例如颜色 2 有 3 个子颜色，3 种颜色有 20、40、40 作为子百分比

我在 JS 中验证表单时遇到问题。

我试过frm["color[]"].length了，它给了我三个，现在第一种颜色的子颜色有了color[1][]名字。如果我得到它的长度color[]并循环它。

for (i = 0; i < frm["color[]"].length; i++){
    k = i+1;
    console.log( frm["color["+k+"][]"] ); 
}

这行得通。

由于现在有 3 种颜色并 console.log(frm["color[]"].length)返回 3，如果只有 1 种颜色，它会返回下拉列表中的项目数，例如 2k+

如果您有任何问题，请告诉我 jQuery 解决方案也很受欢迎

谢谢

Answer 1

jQuery：

$('select[name^="color["]').each(function() {
  if ($(this).val()=="SELECT") {
    alert(this.name.replace(/[^color0-9]/gi," ")+"is not selected");
    return false;
  }
});