如何在具有多個屬性的 select 標記中選擇必要的選項

Question

我想創建一個條件，允許用戶從具有多個屬性的 select 標記中使用 select 至少 3 個選項，但選項在輸入逗號（，）后動態來自輸入標記。 例如，如果用戶鍵入 hello 然后鍵入 comma(,) 值 hello 將顯示在選項標記上。所以我怎樣才能使我的選項被選中並至少選擇 3 個選項。 這是我的代碼

var skills = document.querySelector('#skills');
var skillhave = document.querySelector('#skill');
var skillshaving = [];

skills.addEventListener('keyup', function(event) {
  if (event.keyCode === 188) {

    if (this.value.length < 2) {
      alert("skill required");
      this.value = "";
    } else {
      var skill = this.value.substring(0, this.value.length - 1);
      skillshaving.push(skill);
      this.value = "";
      //reloadskills();
      addSkills(skill);
    }
  }
});
function addSkills(skill) {       
  var opt = document.createElement('option');
  opt.value = skill.toUpperCase();;
  opt.innerHTML = skill.toUpperCase();;
  opt.selected = true;
  skillhave.appendChild(opt);
}
<input type="text" class="form-control" placeholder="Enter skill" name="skills" id="skills"> <!--for entering skills via text -->

<select name="" id="skill" multiple></select>
<!--for diplaying it in option tag -->

Answer 1

在提交事件上使用元素的selectedOptions屬性。 請參閱以下片段

 function submit() { const multiSelect = document.querySelector('#multi-select'); if (multiSelect.selectedOptions.length > 2) { console.log('process submit'); } else { console.log('Please select atleast 3 options'); } }

 <select id="multi-select" multiple> <option>2</option> <option>4</option> <option>6</option> <option>8</option> </select> <button onclick="submit()">Submit</button>