javascript - 如何使用 JavaScript 从多个下拉列表中选择唯一值？

Question

我正在构建一个在线注册表格。在网页表单中，有六个下拉列表如下:

    <select name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>      
    </select>
    <select name="hssub2" id="hssub2" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>  
    </select>
    <select name="hssub3" id="hssub3" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>  
    </select>
    <select name="hssub4" id="hssub4" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>  
    </select>
    <select name="hssub5" id="hssub5" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>  
    </select>
    <select name="hssub6" id="hssub6" onchange="checkUnique(this.id);">
        <option value="1">Bengali</option>
        <option value="2">English</option>
        <option value="3">Hindi</option>
        <option value="4">Physics</option>
        <option value="5">Chemistry</option>
        <option value="6">Mathematics</option>  
    </select>

    <div id="notification"></div>

    <button type="button" name="submit" id="submit" onclick="return saveNext();">Save and Next</button>

现在我希望用户能够选择相互排斥的选项，即六个列表中的选择集应该包含唯一值。为确保这一点，我设计了以下 JavaScript 代码:

function checkUnique(elementID) {
    var elt = document.getElementById(elementID);                       
    var hssubcode = document.getElementById(elementID).value;
    var elementIDsuffix = parseInt(elementID.substring(5)) - 1; 
    // to make it compatible with array index

    var othercodes = [
        document.getElementById('hssub1').value,
        document.getElementById('hssub2').value,
        document.getElementById('hssub3').value,
        document.getElementById('hssub4').value,
        document.getElementById('hssub5').value,
        document.getElementById('hssub6').value
    ];
    for(var i=0; i<=5; i++){
        if(i != elementIDsuffix){
            if(othercodes[i] == hssubcode){
                document.getElementById("submit").setAttribute("disabled","disabled"); 
                // so that it stops form submission;
                document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
                return false;
                break;
            } else {
                document.getElementById("notification").innerHTML = "";
                document.getElementById("submit").removeAttribute("disabled");    
                // so that it allows form submission again;
            }
        }    
    }
}

当用户首先选择说孟加拉语，然后再次选择孟加拉语，然后再次选择孟加拉语，最后更改第二个选择时，上述脚本失败。我能理解代码中的问题，但作为一个新手程序员，我无法思考如何构建所需的逻辑。请帮忙。

Answer 1

您可以使用一个空对象作为字典并计算每个值出现的次数。如果任何值出现超过 2 次，则禁用提交:

function checkUnique(elementID) {
    var elt = document.getElementById(elementID);                       
    var valCounter = {};

    var othercodes = [
        document.getElementById('hssub1').value,
        document.getElementById('hssub2').value,
        document.getElementById('hssub3').value,
        document.getElementById('hssub4').value,
        document.getElementById('hssub5').value,
        document.getElementById('hssub6').value
    ];
    for(var i=0; i<=5; i++){
        var c = valCounter[othercodes[i]] = (valCounter[othercodes[i]] || 0) + 1;
        if(c > 1){
            document.getElementById("submit").setAttribute("disabled","disabled"); 
            // so that it stops form submission;
            document.getElementById("notification").innerHTML = elt.options[elt.selectedIndex].text + " Subject Already Choosen!";
            return false;
        }
    }
    document.getElementById("notification").innerHTML = "";
    document.getElementById("submit").removeAttribute("disabled");    
    // so that it allows form submission again;
}