Question

我有一个包含10个选择列表的表单都具有相同的项目。这些项目是从PHP / MySQL数组中填充的。用户需要为每个选择列表选择一个项目。我需要阻止用户在提交表单之前两次选择相同的项目。

function checkDropdowns(){
    var iDropdowns = 10;  

    var sValue;
    var aValues = new Array();
    var iKey = 0;
    for(var i = 1; i <= iDropdowns; ++i){
        sValue = document.getElementById('test' + i).value;
        if ( !inArray(sValue, aValues) ){
            aValues[iKey++] = sValue;  
        }else{
            alert('Duplicate!');
            return false;
        }
    }    
    return true;
}

Answer 1

使用javascript为选择的值更改添加事件侦听器。然后，在将值与已经存在的值进行比较之后，该函数将循环选择将值带入内存。如果循环发现当前选择具有已选择的选项，则将其恢复为默认值并显示一条消息...

或者，仍然在更改事件中，获取刚刚选择的项目的值，并删除10个选项中此值的所有项目。所以最后用户只有一个选择，因为他只看到他可以选择的选项。但要小心，如果用户在一个选择上改变主意，请确保首先添加您删除的选项。

选项2最好是用户的观点，你会减少挫败感。

编辑：您提供的代码已经做了很多...现在您需要的是在无效的情况下还原更改：

var defaultValues = [];
function onLoadSelect(){//Please execute this on document load, or any event when the select are made available.
    var iDropdowns = 10;
    var iKey = 0;
    for(var i = 1; i <= iDropdowns; ++i){
        var sValue = document.getElementById('test' + i).value;
        defaultValues['test' + i] = sValue;  
    }    
}

然后，在你的函数中，根据我们收集的默认值重置值：

else{
    alert('Duplicate!');
    document.getElementById('test' + i).value = defaultValues['test' + i];
    return false;
}

Answer 2

我已编写代码，我认为它可以改进，但它可以按照您的要求运行。

将它放在body下面的script标签中，以便在文档后加载。

在id数组中输入select / dropdown元素的id名称。

看看：//花了我3个小时O_O

http://jsfiddle.net/techsin/TK9aX/15/

i think i need better strategy to approach programming.

JavaScript验证，防止重复的输入字段

2 个答案: