Document.write method

July 1, 2022

So, I’m trying to make a JS action where it should display the selected items from the list, I can only select one but I want to select more than one and view it in a list

<body>
  <label for="issue">Issue Type:</label>

  <select multiple="multiple" name="issue" id="issue">
    <option value="passport">passport</option>
    <option value="selfie">selfie</option>
    <option value="nationalId">nationalId</option>

  </select>

  <p> you are missing the following information:</p>
  <ul id="issue-type">
    <script>
      var output = '';
      let issues = document.getElementById("issue");
      for (i = 0; i < issues.length; i++) {
        output += document.write("<li>" + issues[i].text + </li>").innerHTML = issues;
      }
    </script>
  </ul>

</body>

>Solution :

Here is one solution and I commented each line.

let output = '';
let issues = document.querySelector("#issue");
let issue_types = document.querySelector("#issue-type");

issues.addEventListener("change", function(e) { //change event listener to check for when the select is changed
  issue_types.innerHTML = ""; //empties destination div
  let options = e.target.selectedOptions; //grabs the selected options
  options = Array.from(options).map(({ value }) => value); //converts the selected options to an array of values
  options.forEach(function(opt){ //loops through the options
    let li = document.createElement("li"); //creates a LI element
    li.innerHTML = opt; //sets the innerHTML of the list item to the option
    issue_types.appendChild(li) //appends the list to the destination UL
  });
});

<label for="issue">Issue Type:</label>

  <select multiple="multiple" name="issue" id="issue">
    <option value="passport">passport</option>
    <option value="selfie">selfie</option>
    <option value="nationalId">nationalId</option>

  </select>

  <p> you are missing the following information:</p>
  <ul id="issue-type">
  </ul>