文章/答案/技术大牛

发布

问Document.write法
EN

Stack Overflow用户

提问于 2022-07-01 18:31:51

回答 2查看 26关注 0票数 -1

因此，我尝试做一个JS操作，它应该从列表中显示选定的项，我只能选择一个，但我想选择多个，并在列表中查看它

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

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-01 18:45:16

这里有一个解决方案，我对每一行进行了注释。

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>

票数 0

Stack Overflow用户

发布于 2022-07-01 18:46:30

您需要使用事件侦听器侦听所选内容的更改，并且需要更新元素的html。您很少想在应用程序中使用document.write。

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>

我是怎么编码的

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72833365

复制

相似问题

问Document.write法
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Document.write法EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Document.write法
EN