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

时间：2015-05-10 12:27:19

标签： javascript html

我正在建立一个在线注册表。在Web表单中，有六个下拉列表，如下所示：

    <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;
            }
        }    
    }
}

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

4 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：1)

首先向列表添加一个新选项，其中包含一个您可以轻松识别的值：

<select name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
    <option value="null">Select</option>
    <option value="1">Bengali</option>

然后在现有条件之前添加 if 条件，然后循环将如下：

for(var i=0; i<=5; i++){
    if(i != elementIDsuffix){
        if(othercodes[i] === "null"){ //check whether anything is null
            document.getElementById("notification").innerHTML = "Select in all lists to continue"; // if null print this
        }else if(othercodes[i] == hssubcode){
            document.getElementById("submit").setAttribute("disabled","disabled");
            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");
        }
    }
}

但是第一次进入页面时，按钮不会禁用。所以对于那个函数调用body onload事件; 

<body onload="checkUnique('hssub1');">

我认为这可以帮助您继续对现有代码进行微小更改

答案 2 :(得分：1)

github上有这个JavaScript代码段。只是一个1.4 kB的js文件。 在包含脚本之前只包括jquery，你应该很高兴。

https://github.com/akhilnaik/unique.js

您需要为所有＆lt; 提供类选择＆gt; 标记，您希望拥有唯一值 我在这里使用 class =＆＃39; abc＆＃39; 作为示例。

<select class='abc' name="hssub1" id="hssub1" onchange="checkUnique(this.id);">
    <option value="null">Select One</option>
    <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 class='abc' name="hssub2" id="hssub2" onchange="checkUnique(this.id);">
    <option value="null">Select One</option>
    <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>
and so on .....

在窗口上调用 唯一 的构造函数。 onload 就像这样

var k = new Unique('.abc','null');//u need to have a default null value

多数民众赞成一切都得到了照顾 选定的值将自动禁用。

在包含 unique.js 之前不要忘记包含 JQuery 希望这会有所帮助。

答案 3 :(得分：0)

我不知道这是否符合您的需求，但如果您想获得警告，如果已经选择了任何值，您可以这样做：

function checkUnique(elementID) {
  var values = [];
  var elements = document.getElementsByTagName('select');
  for (var i=0, l=elements.length; i < l; i++) {
    if (document.getElementById(elementID).value === elements[i].value && document.getElementById(elementID) != elements[i]) {
      console.log('not unique');
    }
  }
}

而不是console.log('not unique')你可以发出警告。

相关问题
最新问题