Question

我有一个HTML格式，有几个选择元素，以这种方式对它们进行验证的最佳方法是什么，没有两个选择元素可以具有相同的值，验证函数应该触发select，所以它可以检查是否有任何选项具有相同的选项值，如果是，然后提醒一些东西，我可以得到一个解释如何在javascript中写这个？

谢谢

这里有一些我要验证的HTML代码：

    <form name="forma" action="" method="POST">

    <select name="sel1">
  <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel2">
   <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    <select name="sel3">
    <option>Please select</option>
    <option>brand1</option>
    <option>brand2</option>
    <option>brand3</option>
    </select>

    </form>

这是稍微调整的解决方案，但就是这样：

var selectTest = function () {
    var i, j;
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
        if(sels[i].value != "Please select")
            {
            if (sels[i].value === sels[j].value) {
                alert("Selected values must be different");
                return;
            }
            }
        }
    }

};

特别tnx到austin cheney，感谢所有发布和参与的人。

Answer 1

首先，不要使用name属性作为脚本的参考点。 Name是指DOM中的命名元素数组，在表单控件之外的全局DOM中通常无用。使用名称数组时，很难将子节点与同一命名元素的子节点区分开来。使用id属性与脚本一起使用，而脚本是一个唯一的标识符。

var selTest = function () {
    var i, j, error = document.getElementById("error"),
    sels = [document.getElementById("sel1"), document.getElementById("sel2"), sel3 = document.getElementById("sel3")];
    for (i = 0; i < sels.length; i += 1) {
        for (j = i + 1; j < sels.length; j += 1) {
            if (sels[i].value === sels[j].value) {
                error.display = "block";
                sels[i].backgroundColor = "#f00";
                sels[j].backgroundColor = "#f00";
                return false;
            }
        }
    }
};

编辑：改变回报;返回虚假;用于onsubmit事件。

只需将选择列表的id属性值添加到上面代码中的“sels”数组即可。如果测试结果为真，则上面的代码将显示id为“error”的隐藏元素。它还会将冒犯的选择列表的背景颜色更改为红色。

Answer 2

我通常会建议使用jQuery，因为它可以简化它。你想要沿着这些方向做点什么。

    function hasDuplicates() {
        var dupe = false;
        $("select option:selected").each(function(i) {

            var id = $(this).parent().attr("id");
            var value = $(this).attr("value");

            $("select option:selected").each(function(c) {
                if ($(this).parent().attr("id") != id && $(this).attr("value") == value) {
                    alert("Duplicate");
                    dupe = true;
                    return false;
                }
            });

            if (dupe) {
                return false;
            }
        });

        return dupe;
    }

这将循环浏览页面上的所有选择框，并将每个选项框与每个选择框进行比较。如果存在重复值，它将弹出警报并返回true。

要在更改选择框时触发它，您需要向每个选项添加onchange事件，如下所示。每个选择都需要设置一个唯一的ID，但如果您不想添加ID，可以将对attr（“id”）的调用更改为attr（“name”）。

<select onchange="hasDuplicates()">...

性能方面，将值存储在数组中可能是有意义的，因为这个解决方案通过嵌套循环对DOM进行了大量的攻击。</ p>

Answer 3

为每个选择语句赋予onchange =“validate（'1'）”onchange =“validate（'2'）”onchange =“validate（'3'）”。

function validate（x）{ 如果（X == 1） { var selectedvalue = document.forma.sel1.options [document.forma.sel1.selectedIndex] .value if（selectedvalue == document.forma.sel2.options [document.forma.sel2.selectedIndex] .value || 的SelectedValue == document.forma.sel3.options [document.forma.sel3.selectedIndex]。价值）警告（“没有两个值不能相同”）; } esle if（x == 2） { var selectedvalue = document.forma.sel2.options [document.forma.sel2.selectedIndex] .value if（selectedvalue == document.forma.sel1.options [document.forma.sel1.selectedIndex] .value || 的SelectedValue == document.forma.sel3.options [document.forma.sel3.selectedIndex]。价值）警告（“没有两个值不能相同”）; } 否则如果（x == 3） { var selectedvalue = document.forma.sel3.options [document.forma.sel3.selectedIndex] .value if（selectedvalue == document.forma.sel1.options [document.forma.sel1.selectedIndex] .value || 的SelectedValue == document.forma.sel1.options [document.forma.sel1.selectedIndex]。价值）警告（“没有两个值不能相同”）;

} }

多选验证

3 个答案: