Add Input value as a Select Option

Asked

Viewed 70 times

0

That is the scenario:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="">
    <form>
      <input type="text">
      <button type="submit" name="Submit" onclick="addName">Add</button>
      <select class="" name="">
        <option value=""> - </option>
      </select>
    </form>
  </div>
  <script>
    function addName() {
      const lista = [{
        name: document.querySelector('input').value;
      }];

      // Select tag
      const selectOptions = document.querySelector('.selectOptions').option;

      lista.forEach(name => {
        selectOptions.add(
          new Option(option.name);
        )
      })
    }
  </script>
</body>

</html>

I need to take the value inserted in this input, and insert it into an array that will be all the contents of the options of this select. I’m stuck in this exercise, I’ve researched everything, I haven’t found a solution. ;-; I’m a beginner, if anyone can shed a light!

javascript html

  • I made some more modifications to the code, but now I get the value of "Undefined". --' Function addName() { Let selectMenu = Document.querySelector('.mySelect'); Let option = Document.createelement('option'); Let inputValue = Document.querySelector('.inNputame'). text; selectMenu.add(option, inputValue); Alert(inputValue); }

2 answers

1


You need to enter the value in the tag with the innerHTML and add the tag with the appendchild.

Follows the correction:

function addName() {
    let selectMenu = document.querySelector('.mySelect');
    let option = document.createElement('option');
    let inputValue = document.querySelector('.inputName');

    option.innerHTML = inputValue.value;

    selectMenu.appendChild(option);
    alert(inputValue);
}

Tips:

  1. You better use id to select tags instead of classes, because they serve for styles;
  2. Option need not specify type="text;
  3. As the div it has no class, it is better to remove it.

Good studies!

  • Thank you very much!

0

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style media="screen">
  .mySelect {
    width: 100px;
  }
</style>

<body>
  <div class="">
    <form>
      <input type="text" class="inputName">
      <button type="button" name="Button" onclick="addName()">Add</button>
      <select class="mySelect" name="">
        <option type="text"> - </option>
      </select>
    </form>
  </div>

</body>
<script type="text/javascript">
  function addName() {
    let selectMenu = document.querySelector('.mySelect');
    let option = document.createElement('option');
    let inputValue = document.querySelector('.inputName').text;

    selectMenu.add(option, inputValue);
    alert(inputValue);
  }
</script>

</html>

After the changes, but still receive "Undefined". ;-; I think I’m almost there!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.