쉼표 앞의 입력 텍스트에서 동적으로 옵션을 표시하고 싶지만 선택 태그에 옵션이 표시되지 않습니다. 예를 들어 사용자가 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 -->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 -->이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다