堆棧內存溢出
  簡體   English   中英

如何使用JavaScript從多個下拉列表中選擇唯一值？

[英]How to select unique values from multiple dropdown lists using JavaScript?

 原文  2015-05-10 12:27:18  0   5    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;
            }
        }    
    }
}

當用戶首先選擇說孟加拉語，然后再次選擇孟加拉語，然后再次選擇孟加拉語並最終更改第二個選擇時，上述腳本將失敗。 我可以理解代碼中的問題，但是作為一名新手程序員，我無法考慮如何構建所需的邏輯。 請幫忙。

5 個解決方案

解決方案1
 1 已采納  2015-05-10 13:33:16

您可以將一個空對象用作字典，並計算每個值有多少次出現。 如果有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;
}

解決方案2
 1  2015-05-10 13:49:16

首先，我建議使用默認選項，例如“選擇主題”，其值為“ null”或0-可以輕松丟棄的東西。 這樣就沒有默認的選定值。 其次，我強烈建議不要將事件處理程序放入您的標記中。 保持這種狀態真是一團糟。 

<select name="hssub1" id="hssub1">
    <option value=null>Select</option> //added default 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 name="hssub2" id="hssub2">
    <option value=null>Select</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 name="hssub3" id="hssub3">
    <option value=null>Select</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 name="hssub4" id="hssub4">
    <option value=null>Select</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 name="hssub5" id="hssub5">
    <option value=null>Select</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 name="hssub6" id="hssub6">
    <option value=null>Select</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>

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

<button type="button" name="submit" id="submit">Save and Next</button>

這是Javascript-非常簡單，但是如果有任何問題，您可以提出： 

var selects = document.querySelectorAll('select'),
    notify = document.getElementById('notification');

function getOthers(current){
    var values = [];
    for(var i=0;i<selects.length;i++){
        if(selects[i].value!='null' && selects[i]!=current)
            values.push(selects[i].value);
    }
    return values;
}

function checkUnique(){
    if(this.value && getOthers(this).indexOf(this.value)>-1){
        notify.innerText = 'You already selected that';
        this.value = null;
    }
}

for(var i=0;i<selects.length;i++)
    selects[i].onchange = checkUnique;

document.getElementById('submit').onclick = function(){
    var values = getOthers(); // will return all selected values this time
    if(values.length < 6){
        notify.innerText = 'select all six';
        return false;
    }
    notify.innerText = '';
    return true;
}

小提琴： http : //jsfiddle.net/p699m9x7/

解決方案3
 1  2015-05-10 14:29:45

首先，將新選項添加​​到列表中，並使用一個易於識別的值： 

<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');">

我認為這將幫助您以對現有代碼的最小更改繼續

解決方案4
 1  2015-06-10 15:22:22

github上有這個JavaScript片段。 只是一個1.4 kB js文件。 只需在包含腳本之前包含jquery，就可以了。

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

您需要為要具有唯一值的所有<select>標記提供一個類
在這里，我以class ='abc'為例。 

<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 .....

on window. 並在window上調用的構造函數。 這樣的加載 

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

就這樣，一切都得到了照顧。
所選值將自動被禁用。

在包含unique.js之前不要忘記包含JQuery
希望這可以幫助。

解決方案5
 0  2015-05-10 13:30:45

我不知道這是否滿足您的需求，但是如果您想得到警告，如果已經選擇了任何值，則可以這樣做： 

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') 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何從下拉列表中選擇多個值，並使用JavaScript或jQuery將其添加到另一個字段 如何使用 Selenium 從多層下拉菜單中選擇值 使用javascript / jquery進行多個下拉列表驗證 從多個下拉列表中獲取選定的值 如何使用 javaScript 從其他下拉列表中 select 下拉項目？ 使用數字值從JavaScript的下拉框中選擇項目 如何使用JavaScript從單獨的選擇列表中檢索附加值 如何使用javascript打印選擇標簽的下拉值？ 我正在使用Bootstrap CSS版本3，如何從下拉列表中選擇多個值 如何使用 JavaScript 設置多個選擇的值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM