如何限制javascript中自定義選擇選單中選擇的數量？

如何限制javascript中自定義選擇選單中選擇的數量？

我想制作一個自定義選擇選單，您可以在其中選擇專案。這是我現在的代碼：

class CustomSelect {
  constructor(originalSelect) {
    this.originalSelect = originalSelect;
    this.customSelect = document.createElement("div");
    this.customSelect.classList.add("select");

    this.originalSelect.querySelectorAll("option").forEach((optionElement) => {
      const itemElement = document.createElement("div");

      itemElement.classList.add("select__item");
      itemElement.textContent = optionElement.textContent;
      this.customSelect.appendChild(itemElement);

      if (optionElement.selected) {
        this._select(itemElement);
      }

      itemElement.addEventListener("click", () => {
        if (
          this.originalSelect.multiple &&
          itemElement.classList.contains("select__item--selected")
        ) {
          this._deselect(itemElement);
        } else {
          this._select(itemElement);
        }
      });
    });

    this.originalSelect.insertAdjacentElement("afterend", this.customSelect);
    this.originalSelect.style.display = "none";
  }

  _select(itemElement) {
    const index = Array.from(this.customSelect.children).indexOf(itemElement);

    if (!this.originalSelect.multiple) {
      this.customSelect.querySelectorAll(".select__item").forEach((el) => {
        el.classList.remove("select__item--selected");
      });
    }

    this.originalSelect.querySelectorAll("option")[index].selected = true;
    itemElement.classList.add("select__item--selected");
  }

  _deselect(itemElement) {
    const index = Array.from(this.customSelect.children).indexOf(itemElement);

    this.originalSelect.querySelectorAll("option")[index].selected = false;
    itemElement.classList.remove("select__item--selected");
  }
}

document.querySelectorAll(".custom-select").forEach((selectElement) => {
  new CustomSelect(selectElement);
});

.select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
  gap: 1px;
}

.select__item {
  padding: 10px;
  cursor: pointer;
  font-family: "Heebo", sans-serif;
  text-align: center;
  border-radius: 3px;
  background: #eeeeee;
  transition: background 0.1s;
}

.select__item--selected {
  background: #009578;
  color: #ffffff;
}

<select name="language" class="custom-select" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="sql">SQL</option>
  <option value="kotlin">Kotlin</option>
</select>

它現在所做的很好，我只是想添加限制，以便您只能選擇兩個專案。這是因為我想做一個類似記憶的游戲。

有誰知道如何做到這一點？

uj5u.com熱心網友回復：

只需計算所選專案，創建變數let count = 0;，在選擇時添加計數增加，然后在選擇前檢查計數。

class CustomSelect {
  constructor(originalSelect) {
    this.originalSelect = originalSelect;
    this.customSelect = document.createElement("div");
    this.customSelect.classList.add("select");

    let count = 0;

    this.originalSelect.querySelectorAll("option").forEach((optionElement) => {
      const itemElement = document.createElement("div");

      itemElement.classList.add("select__item");
      itemElement.textContent = optionElement.textContent;
      this.customSelect.appendChild(itemElement);

      if (optionElement.selected) {
        this._select(itemElement);
      }

      itemElement.addEventListener("click", () => {
        if (
          this.originalSelect.multiple &&
          itemElement.classList.contains("select__item--selected")
        ) {
          this._deselect(itemElement);
          count--;
        } else if (count < 2) {
          this._select(itemElement);
          count  ;
        }
      });
    });

    this.originalSelect.insertAdjacentElement("afterend", this.customSelect);
    this.originalSelect.style.display = "none";
  }

  _select(itemElement) {
    const index = Array.from(this.customSelect.children).indexOf(itemElement);

    if (!this.originalSelect.multiple) {
      this.customSelect.querySelectorAll(".select__item").forEach((el) => {
        el.classList.remove("select__item--selected");
      });
    }

    this.originalSelect.querySelectorAll("option")[index].selected = true;
    itemElement.classList.add("select__item--selected");
  }

  _deselect(itemElement) {
    const index = Array.from(this.customSelect.children).indexOf(itemElement);

    this.originalSelect.querySelectorAll("option")[index].selected = false;
    itemElement.classList.remove("select__item--selected");
  }
}

document.querySelectorAll(".custom-select").forEach((selectElement) => {
  new CustomSelect(selectElement);
});

.select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
  gap: 1px;
}

.select__item {
  padding: 10px;
  cursor: pointer;
  font-family: "Heebo", sans-serif;
  text-align: center;
  border-radius: 3px;
  background: #eeeeee;
  transition: background 0.1s;
}

.select__item--selected {
  background: #009578;
  color: #ffffff;
}

<select name="language" class="custom-select" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="sql">SQL</option>
  <option value="kotlin">Kotlin</option>
</select>

標籤：javascript html css

上一篇：在Rust中使用Tokio-postgres向Postgres插入多個值

下一篇：如何使用輸入型別復選框定位元素