时间戳

首页 > 解决方案 > 在输入标签中按下逗号后如何在选择标签中显示选项

javascript - 在输入标签中按下逗号后如何在选择标签中显示选项

问题描述

我想在逗号之前的输入文本之后动态显示选项，但它没有在选择标签中显示选项。例如，如果用户键入 hello 然后键入逗号 (,)，则逗号之前的值应显示在具有多个属性的 select 标记内的选项上。

这是我的代码：

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();
    }
  }

});

function reloadskills() {
  skillhave.innerHTML = "";
  for (var i = 0; i < skillshaving.length; i++) {
    var opt = document.createElement('option');
    opt.value += $ {
      skillshaving[i]
    };
    opt.innerHTML += $ {
      skillshaving[i]
    };
    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 displaying it in option tag -->

标签： javascript

解决方案

opt.value您在分配&时遇到语法错误opt.innerHTML。我已经更新了如下代码。

opt.value = skillshaving[i]; // Updated code
opt.innerHTML = skillshaving[i]; // Updated code

检查下面的输出。

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 reloadskills() {
//  skillhave.innerHTML = "";
//  for (var i = 0; i < skillshaving.length; i++) {
//	var opt = document.createElement('option');
//	opt.value = skillshaving[i]; // Updated code
//	opt.innerHTML = skillshaving[i]; // Updated code
//	skillhave.appendChild(opt);
//  }
//}

function addSkills(skill) {	  	  
  var opt = document.createElement('option');
  opt.value = skill;
  opt.innerHTML = skill;
  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 -->

推荐阅读