时间戳

首页 > 解决方案 > 在列表中显示所选项目

javascript - 在列表中显示所选项目

问题描述

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

这样选择器中选择的元素就会显示在它下面的列表中。

示例代码：

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

标签： javascripthtmlcssdom-events

解决方案

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

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>

推荐阅读