防止多次选择相同的值

Question

我想防止在我的项目中多次选择相同的值。

我的表格

<div class="form-row">
            <div class="form-group col-md-6">
                <select name="number" class="form-control" id="index0">
                    <option value="">Select Number</option>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <button class="btn btn-primary" id="addNumber" onclick="addNumber();">Add Number</button>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <select name="letter" class="form-control" id="index00">
                    <option value="">Select Letter</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                </select>
            </div>
            <div class="form-group col-md-4">
                <button class="btn btn-primary" onclick="addLetter();">Add Letter</button>
            </div>
        </div>
        <div class="newHtml">
            <div class="newLetter">
                
            </div>
        </div>

我有两个选择框，一个是数字，一个是字母。

一个数字可以有多个字母，例如数字 1 可以有字母 A、B、C、D、E 等，其他数字也是如此。

当我添加新表单时，点击添加号码按钮，所选号码不应显示在那里。如果已经选择了数字 1 的字母 A，那么如果我单击添加字母按钮，则该数字 1 不应出现 A。 如何实现？

Answer 1

这是您想要实现的目标吗？

let records = [];

const numberDropdown = document.querySelector("#dropdown-number"),
  letterDropdown = document.querySelector("#dropdown-letter"),
  submitButton = document.querySelector("#submit-btn");

submitButton.addEventListener("click", handleEntry);
numberDropdown.addEventListener("change", updateDropdowns);
letterDropdown.addEventListener("change", updateDropdowns);

function handleEntry() {
  let selectedNumber = numberDropdown.value,
    selectedLetter = letterDropdown.value;
  records.push({
    number: selectedNumber,
    letter: selectedLetter
  });
  updateList();
  updateDropdowns();
  let i = 0;
  while (letterDropdown.options[i].disabled) {
    i++
  };
  letterDropdown.selectedIndex = i;
}

function updateDropdowns() {
  if (records.length) {
    let noLeft = true;
    document.querySelectorAll("#dropdown-letter option").forEach((option) => {
      let taken = false;
      records.forEach((record) => {
        if (
          option.value == record.letter &&
          numberDropdown.value == record.number
        ) {
          taken = true;
        }
      });
      if (taken) {
        option.disabled = true;
      } else {
        option.disabled = false;
        noLeft = false;
      }
    });
    if (noLeft) {
      submitButton.disabled = true;
      alert('select another number');
    } else {
      submitButton.disabled = false;
    }
  } else {
    document.querySelectorAll("#number-dropdown option").forEach((option) => {
      option.disabled = false;
    });
  }
}

updateDropdowns();
updateList();

function updateList() {
  document.querySelector('#list').innerHTML = '';
  records.forEach((record) => {
    document.querySelector('#list').innerHTML += `<li>${record.letter} | ${record.number}</li>`
  });
}

<select id="dropdown-number">
  <option value="0" selected>0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="dropdown-letter">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>
<button id="submit-btn">Add</button>

<p>Entries:</p>
<ul id="list"></ul>

Answer 2

实际上，使用 jQuery/CSS 选择器并没有那么难。试试那个：

let letters = ["A", "B", "C", "D", "E"];

function addNumber() {
    let val1 = $("#index0").val();
    let val2 = $("#index00").val();
    if ($(".newLetter > .number[data-value=" + val1 + "]").length == 0) {
        $(".newLetter").append(
            '<div data-value="' + val1 + '" class="number">' + val1 + "</div>"
        );
        $('#index0 > option[value="' + val1 + '"]').remove();
        $('#index00 > option[value="' + letters[parseInt(val1) - 1] + '"]').remove();
    }
}

function addLetter() {
    let val1 = $("#index0").val();
    let val2 = $("#index00").val();
    if ($(".newLetter > .letter[data-value=" + val2 + "]").length == 0) {
        $(".newLetter").append(
            '<div data-value="' + val2 + '" class="letter">' + val2 + "</div>"
        );
        $('#index1 > option[value="' + val2 + '"]').remove();
    }
}

在codepen

上查看

您应该创建一个数组，以便整合这些值。我可能没理解正确。