Add new item to <p> tag and assign to drop down list dynamically-CodePudding

I'm doing a website that allow user to add new group to the existing group. In the existing group it already have three fixed group which are It, cleaning, accountant, so my idea was letting user to add group name by clicking submit and their input field will be sent to empty's <p> tag (eg： nurse, doctor.. and so on differentiate which a coma ,). Other than that, after I able to get the existing and new added group, I need to dynamically add the full groups to a drop down list. (eg: It, cleaning, accountant, nurse, doctor).

I know stackoverflow is not a code writing service, but I do make own research before posting this question and I couldn't found any useful resources. So anyone who willing to guide me will be much appreciate. Thanks in advance

Current template:

Expected Output:

Full code:

<!DOCTYPE html>
<html>
   <body>
      <h1>Existing Group</h1>
      <p>IT, Cleaning, Accountant</p>
      <h1>Add New Group</h1>
      <p></p>
      <input type="tel" id="group" name="group" placeholder="enter group name">
      <br><br>
      <button type="button" class="btn btn-primary btn-sm">Submit</button>
      <h1>Drop Down List</h1>
      <label for="group">Choose a group:</label>
      <select name="group" id="group">
         <option value="IT">IT</option>
         <option value="Cleaning">Cleaning</option>
         <option value="Accountant">Accountant</option>
      </select>
   </body>
</html>

CodePudding user response：

In this case, you will need to use some javascript depending on your requirements to add the extra node as follows:

Pure JS:

   var result = document.getElementById("group");
   var tag = document.createElement("option");
   tag.setAttribute("value",result.value)
   var text = document.createTextNode(result.value);
   tag.appendChild(text);
   var element = document.getElementById("groupSelect");
   element.appendChild(tag);

Keep in mind you have 2 elements with the same ID (group), which will cause most of your JS to crash. Also note that you can also use Jquery which might be a bit easier as well

CodePudding user response：

You need to use JavaScript.

First, you use addEventListener() to listen when the user clicks the submit button. Then, we get the value of the input and separate it by commas with input.value.split(','). Then, we loop through the values, create a new <option> tag and add it to the <select> tag.

Also, you have two elements with id="group", so you need to change one of them. I changed the <select> to id="group-select".

const submit = document.querySelector('button');
const input  = document.querySelector('input');
const select = document.querySelector('select');
const myP    = document.querySelector('p#myP');

submit.addEventListener('click', function(e)
{
  const values = input.value.split(',');
  
  if (myP.innerText == '')
  {
    myP.innerText = values;
  }
  else
  {
    myP.innerText  = ', '   values;
  }
  
  for (let i in values)
  {
    const new_option = document.createElement('option');
    
    new_option.value     = values[i];
    new_option.innerText = values[i];
    
    select.appendChild(new_option);
  }
});

<!DOCTYPE html>
<html>
   <body>
      <h1>Existing Group</h1>
      <p>IT, Cleaning, Accountant</p>
      <h1>Add New Group</h1>
      <p id="myP"></p>
      <input type="tel" id="group" name="group" placeholder="enter group name">
      <br><br>
      <button type="button" class="btn btn-primary btn-sm">Submit</button>
      <h1>Drop Down List</h1>
      <label for="group">Choose a group:</label>
      <select name="group" id="group-select">
         <option value="IT">IT</option>
         <option value="Cleaning">Cleaning</option>
         <option value="Accountant">Accountant</option>
      </select>
   </body>
</html>