Question

我正在尝试检测选择框是否与另一个选择框相同。

但是我试图跳过列表中的第一项。

因此，如果任何选择框（bk1，bk2，bk3，bk4，bk5）彼此相同，那么我希望它说一个字段是相同的，但如果选择框中的第一个项目是选择然后我希望它忽略它而不检查它是否相同。

我似乎让所有事情都按照我的意愿行事，但无法解决如何跳过列表中的第一项。

所以如果： block1 = 113 block2 = 0 block3 = 0 block4 = 116 block5 = 117 然后它应该警告“没有相同的字段，可以安全地继续前进”。（因为0是选择框中的第一项）

所以如果： block1 = 113 block2 = 0 block3 = 115 block4 = 115 block5 = 117 然后它应该警告“哦，不，其中一个领域是相同的＆＃39;因为115在列表中是相同的。

<select id="block1"">     
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
</select>
<select id="block2"">     
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
</select>
<select id="block3"">     
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
</select>
<select id="block4"">     
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
</select>
<select id="block5"">     
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
</select>


var bk1 = document.getElementById("block1").value;
var bk2 = document.getElementById("block2").value;
var bk3 = document.getElementById("block3").value;
var bk4 = document.getElementById("block4").value;
var bk5 = document.getElementById("block5").value;

var test = [bk1, bk2, bk3, bk4, bk5];
var res = true; 
for(var i = 0; i < test.length; i++) { 
  if (test.indexOf(test[i], i + 1) >= 0) {
    res = false; 
    break;
  } 
}

if(res){
    alert("no fields the same, safe to move on");
}else{
  alert("oh no, one of the field are the same");selected option";
}

Answer 1

我必须在每个选择的结束属性中修复双引号：

<select id="block1"">

只需为test[i] > 0添加支票：

validate = function() {
    var bk1 = document.getElementById("block1").value;
    var bk2 = document.getElementById("block2").value;
    var bk3 = document.getElementById("block3").value;
    var bk4 = document.getElementById("block4").value;
    var bk5 = document.getElementById("block5").value;

    var test = [bk1, bk2, bk3, bk4, bk5];
    var res = true;

    for(var i = 0; i < test.length; i++) {
        if (test[i] > 0) {
            if (test.indexOf(test[i], i + 1) >= 0) {
                 res = false; 
                 break;
            } 
        }
    }

    if(res){
        alert("no fields the same, safe to move on");
    }else{
        alert("oh no, one of the field are the same");
    }
}

https://jsfiddle.net/3cq0hjh5/

Answer 2

尝试使用selectedIndex：

＆＃13;

var validate = function() {
  var cnt = {}, si, dup = false;
  for (var i = 1; 5 >= i; i++) {
    si = document.getElementById('block' + i).selectedIndex;
    if (si) { //not first option
      if (cnt[si]) { //duplicate
        dup = true;
        break;
      }
      cnt[si] = 1; //mark this index
    }
  }
  alert(dup ? 'Duplicates found !' : 'No duplicates ...');
  return false;
};

＆＃13;

<form onsubmit="return validate();">
  <select id="block1">
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
  </select>
  <select id="block2">
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
  </select>
  <select id="block3">
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
  </select>
  <select id="block4">
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
  </select>
  <select id="block5">
    <option value="0">Item 0</option>
    <option value="111">Item 1</option>
    <option value="112">Item 2</option>
    <option value="113">Item 3</option>
    <option value="114">Item 4</option>
    <option value="115">Item 5</option>
    <option value="116">Item 6</option>
    <option value="117">Item 7</option>
  </select>
  <input type="submit" />
</form>

＆＃13;

Answer 3

您可以使用更通用的函数，通过ID之外的某些方法收集选择。我使用标签名称，但您可以使用类或其他属性：

function checkSelects() {
  var selects = document.querySelectorAll('select');
  var seen = {};
  return Array.prototype.every.call(selects, function(sel) {
    return sel.selectedIndex < 1 || typeof seen[sel.value] == 'undefined'? (seen[sel.value] = true) : false;
  });
}

旧浏览器需要polyfill for every。

检查选择框是否相同但跳过选择框中的第一项

3 个答案: