多重選擇驗證

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屬性用作腳本的參考點。名稱是指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不少。

Answer 3

對於每個選擇語句，onchange =「validate（'1'）」onchange =「validate（'2'）」onchange =「validate（'3'）」。

功能驗證（X）{ 如果（X == 1） { 變種的SelectedValue = document.forma.sel1.options [document.forma.sel1.selectedIndex]。價值 如果（的SelectedValue ==文檔。 forma.sel2.options [document.forma.sel2.selectedIndex] .value || selectedvalue == document.forma.sel3.options [document.forma.sel3.selectedIndex] .value） alert（「No two values can not be相同」）; （x == 2） { } var selectedvalue = document.forma.sel2。項[document.forma.sel2.selectedIndex]。價值 如果（的SelectedValue == document.forma.sel1.options [document.forma.sel1.selectedIndex]。價值|| 的SelectedValue == document.forma.sel3.options [ document.forma.sel3.selectedIndex] .value） alert（「沒有兩個值不能相同」）; } 否則如果（X == 3）{ 變種 =的SelectedValue document.forma.sel3.options [document.forma.sel3.selectedIndex]。價值 如果（的SelectedValue == document.forma.sel1.options [文件.forma.sel1.selectedIndex]。價值|| 的SelectedValue == document.forma.sel1.options [document.forma.sel1.selectedIndex]。價值） 警報（ 「否兩個值不能爲相同的」）;

}}