how to display option in select tag after comma is pressed in input tag

Question

I want to display option dynamically after from input text before comma but it is not displaying the option in select tag. For eg if the user types hello and then types comma (,) the value before comma should display on option inside select tag with multiple attributes.

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

});

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 -->

I'm not sure what the `$` is doing but I think that instead of doing `+=`, just a simple assignment using `=` should work. — tanmay_garg, May 26 '20 at 05:46

Karan · Accepted Answer · 2020-05-26T12:14:51.147

1

You are having syntax error while assigning opt.value & opt.innerHTML. I have updated code as below.

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

Check output below.

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 -->

edited May 26 '20 at 12:14

answered May 26 '20 at 05:46

Karan

12,059
3
24
40

Thanks it worked but how can we make option selected which are pushed – joshua May 26 '20 at 11:51
1

I have replaced your `reloadskills` function with `addSkills`. It will add new option as `selected`. – Karan May 26 '20 at 12:15
one more doubt how can i make that minimum of 3 option is selected – joshua May 26 '20 at 12:20
Check this https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box. – Karan May 26 '20 at 12:26
but in this there is no specified condition of minimum option selected – joshua May 26 '20 at 12:31
1

Yes, but you can try from it and not able to get it done then ask another question. – Karan May 26 '20 at 12:34

how to display option in select tag after comma is pressed in input tag

1 Answers1