How to add value into option using javascript

Question

Here is my code for js

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  tag.value = "";
  span.setAttribute("onclick", "this.remove()");

  tags.append(span);
}

function addOption() {
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = tags.textContent;
  x.add(option);
}

Once the user click on the tags it will close can should display the value to the option but, I only manage to create a blank space inside the option.

Here is related JS Fiddle

user_1056173 · Answer

Changed tags span to contain all option spans.

Then made each span inside tags responsible to add itself back to select and remove itself from tags span.

Please see the changes in the code as per above logic.

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  tag.value = ""; //clear the field when choose or pressed enter key
  span.style.backgroundColor = "#E5E6E7";
  span.style.margin = " 5px";
  span.style.padding = "5px";

  //span will add itself back to select and remove itself from tags
  span.setAttribute("onclick", "addOption(this)");

  if (span.textContent == "Fast Food") {
    $('option[value="Fast Food"]').remove();
  } else if (span.textContent == "Vegan") {
    $('option[value="Vegan"]').remove();
  } else {
    $('option[value="Food"]').remove();
  }
  tags.append(span);
}

function addOption(span) {
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = span.textContent;
  x.add(option);
  span.remove();
}



  
    Food Type

user_10086352 · Answer

Since you're using jQuery, we can make use of the event system. This makes for cleaner code.

The main issue with your code is that you were trying to get textContent of tags which *doesn't exist as a variable. Instead it will reference the id="tags" element.

textContent only returns the text value of that element, not its children. In this case it is empty.

// here we use jQuery's event system to define what happens
// for the events below    
$(document)
    .on("click", ".tag", function(){
        removeTag(this);
    })
    .on("change", "#tag", function(){
        addTag(this);
    });

function removeTag(tag){
    addOption(tag.textContent);
    tag.remove();
}

function addTag(tag) {
    var tags = document.getElementById("tags"),
        span = document.createElement("span");

    span.textContent = tag.value;

    tag.value = ""; //clear the field when choose or pressed enter key
    
    // could you add the following styles as a class?
    span.style.backgroundColor = "#E5E6E7";
    span.style.margin          = "5px";
    span.style.padding         = "5px";

    span.className = "tag";
    
    // no need to set `onclick` here as we're handling at the top of this code
    
    // we can use the text to find the element
    // instead of a repeating if else statment
    $('option[value="' + span.textContent + '"]').remove();

    tags.append(span);
}

function addOption(text) {
    var x      = document.getElementById("tag"),
        option = document.createElement("option");

    option.textContent = text;

    // we also need to set the value here
    // since we're looking for it in `addTag`
    option.value = text

    x.add(option);
}



  
    Food Type

ES6 and improvements

$(document)
    .on("click", ".tag", (event) => removeTag(event.currentTarget))
    .on("change", "#tag", (event) => addTag(event.currentTarget));

function removeTag(tag){
    addOption(tag.textContent);
    tag.remove();
}

function addTag(tag) {
    let tags = $("#tags"),
        span = $('');

    span.text(tag.value);

    tag.value = ""; //clear the field when choose or pressed enter key
    
    // we can use the text to find the element
    // instead of a repeating if else statment
    $(`option[value="${span[0].textContent}"]`).remove();

    tags.append(span);
}

function addOption(text) {
    let x      = $("#tag"),
        option = $('

.tag {
  background-color: #E5E6E7;
  margin: 5px;
  padding: 5px;
}



  
    Food Type

user_223752 · Answer

You had made some logical mistakes, You can update the fiddle as follows:

function addTag(tag) {
  var tags = document.getElementById("tags");
  var span = document.createElement("span");
  span.textContent = tag.value;
  span.setAttribute("onclick", "removeTag(this);");
  tag.options[tag.selectedIndex].remove();
  tags.append(span);
}

function removeTag(elm) {
    elm.remove();
  var x = document.getElementById("tag");
  var option = document.createElement("option");
  option.textContent = elm.textContent;
  x.add(option);
}

#tags span{
  background-color: #E5E6E7;
  margin:5px;
  padding:5px;
  cursor: pointer;
}


  
    Food Type

How to add value into option using javascript

3 Answers