Document.write method-CodePudding

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>

CodePudding user response：

You need to use an event listener to listen for a change of selection and you need to update the html of the element. You rarely ever want to use document.write in an application.

const issueSelect = document.getElementById("issue");
// listen for a change
issueSelect.addEventListener("change", selChanged);

function selChanged() {
  var output = '';
  let issues = issueSelect.options;
  // loop over the options
  for (var i = 0; i < issues.length; i  ) {
    // is it selected?
    if (issues[i].selected) {
      // yes, build a list item
      output  = "<li>"   issues[i].value   "</li>";
    }
  }
  // set the list's content
  document.getElementById("issue-type").innerHTML = output;
}

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

  </ul>


</body>

How I would have coded it

const issueSelect = document.getElementById("issue");
// listen for a change
issueSelect.addEventListener("change", selChanged);

function selChanged() {
  const selectedOpts = issueSelect.querySelectorAll("option:checked");
  const output = [...selectedOpts].map(opt => `<li>${opt.value}</li>`).join('');
  document.getElementById("issue-type").innerHTML = output;
}

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

  </ul>


</body>

CodePudding user response：

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>