在列表中显示选定的项目

Question

如何在列表中显示选中的项目？

以便在选择器中选择的元素显示在其下方的列表中。

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

</body>
</html>

结果应该是什么：

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

Selected items:

<ul>
  <li>1</li>
  <li>3</li>
</ul>

</body>
</html>

Answer 1

我在想你可以使用 JavaScript (JS) 作为获取所选项目并将它们粘贴到其他地方（任何你想要的地方）的方法。

试试这个：

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

    <select id="select" name="users" multiple="multiple"
            required>
        <option class="option" value="1">1</option>
        <option class="option" value="2">2</option>
        <option class="option" value="3">3</option>
    </select>

Selected items:

<ul>
  <li>1</li>
  <li>3</li>
</ul>

</body>
</html>

然后添加JS：

// Get the select input
document.getElementByID("select")

// Get the options
document.getElementByClassName("option")

// Get the options that are selected
var print = `.option:[active]`;

// Print (paste) the selected options elsewhere on the page
if print {
document.write(print);
}

请告诉我这是否有效，因为它可能无效。毕竟我才8岁，才刚刚开始学习web开发

Answer 2

您可以使用以下内容：

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<script>
// References to elements
var select = document.querySelector('select'),
  options = Array.from(select.querySelectorAll('option')),
  form = document.querySelector('.md-form'),
  ul = document.createElement('ul');

// Variables with information
var selected = [];

select.addEventListener('change', function() {
  selected = [];
  ul.innerHTML = '';

  options.map(function(el) {
    if (el.selected) selected.push(el);
  });

  if (selected.length) {
    selected.map(function(el) {
      var li = document.createElement('li');

      li.textContent = el.textContent;

      ul.appendChild(li);
    });

    form.appendChild(ul);
  } else {
    form.removeChild(ul);
  }
});
</script>

</body>
</html>

工作fiddle： https://jsfiddle.net/1j7a9h35/

Answer 3

另一种方法是做类似的事情（在代码中添加注释）：

const userSelection = document.querySelector('[name="users"]'); // select element
const userSelect = document.querySelector('ul'); // list container
userSelection.addEventListener('change', function() { // add event listener to change of the select
  const options = userSelection.querySelectorAll('option'); // list of options
  options.forEach(option => { // iterate them
    if(option.selected == true) { // if one of them selected
      const newLI = document.createElement('li'); // create li element
      newLI.textContent = option.value; // add the value of selected option as text content
      newLI.addEventListener('click', function() {  userSelect.removeChild(this); }); // BONUS: remove list item with click
      userSelect.appendChild(newLI); // append the new created li element to the list
    } 
  });
});

<div class="md-form">
  <select name="users" multiple="multiple" required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<ul></ul>

希望对您有所帮助！

Answer 4

您需要检查您选择的是否存在并创建它。

if( document.getElementById("mySelect") != undefined) {
  document.getElementById("mySelect").remove();
}
var selectList = document.createElement("select");

你 map 函数创建在 change 事件句柄中选择的选项作为

 function change (options) {
   var parent = document.getElementsByClassName("md-form")[0];
   if( document.getElementById("mySelect") != undefined) document.getElementById("mySelect").remove();
    var selectList = document.createElement("select");
   let selected = [...options].filter(o => o.selected).map(o => {
   
    selectList.id = "mySelect";
    selectList.multiple = "multiple";
    parent.appendChild(selectList);
    var option = document.createElement("option");
    option.value = o.value;
    option.text = o.text;
    selectList.appendChild(option);

   });
   
 }

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required onchange="change(this.options);">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    
    
</div>

</body>
</html>

在列表中显示选定的项目

Display selected items in a list

html

javascript

css

dom-events