Fatal编程技术网
  • javascript/
  • Javascript 在列表中显示所选项目

Javascript 在列表中显示所选项目

javascript html css

Javascript 在列表中显示所选项目,javascript,html,css,dom-events,Javascript,Html,Css,Dom Events,如何在列表中显示所选项目 使选择器中选定的元素显示在其下方的列表中 示例代码： 1. 2. 3. 结果应该是什么： 1. 2. 3. 选定项目： 1. 3. 我在想，您可以使用JavaScript JS作为获取所选项目的一种方式，并将它们粘贴到任何您想要的地方 试试这个： <!DOCTYPE html> <html lang="en"> <head> </head> <body> <select id="select

如何在列表中显示所选项目

使选择器中选定的元素显示在其下方的列表中

示例代码：

1. 2. 3. 结果应该是什么：

1. 2. 3. 选定项目： 1. 3.
我在想，您可以使用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>
请告诉我这是否有效，因为它可能不起作用。毕竟，我才8岁，刚刚开始学习web开发。

我在想，你可以使用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>
请告诉我这是否有效，因为它可能不起作用。毕竟，我才8岁，刚刚开始学习web开发。

您可以使用以下方法：

<!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>
工作小提琴：

您可以使用以下选项：

<!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>
工作小提琴：
另一种方法是在代码中添加注释：

const userSelection=document.querySelector'[name=users]'；//选择元素 const userSelect=document.querySelector'ul'；//列表容器 addEventListener'change'，函数{//addEventListener以更改select const options=userSelection.querySelectorAll'option'；//选项列表 options.forEachoption=>{//迭代它们 ifoption.selected==true{//如果选择了其中一个选项 const newLI=document.createElement'li'；//创建li元素 newLI.textContent=option.value；//将所选选项的值添加为文本内容 newLI.addEventListener'click'，函数{userSelect.removeChildthis；}；//奖励：通过单击删除列表项 userSelect.appendChildnewLI；//将新创建的li元素追加到列表中 } }; }; 1. 2. 3.
另一种方法是在代码中添加注释：

const userSelection=document.querySelector'[name=users]'；//选择元素 const userSelect=document.querySelector'ul'；//列表容器 addEventListener'change'，函数{//addEventListener以更改select const options=userSelection.querySelectorAll'option'；//选项列表 options.forEachoption=>{//迭代它们 ifoption.selected==true{//如果选择了其中一个选项 const newLI=document.createElement'li'；//创建li元素 newLI.textContent=option.value；//将所选选项的值添加为文本内容 newLI.addEventListener'click'，函数{userSelect.removeChildthis；}；//奖励：通过单击删除列表项 userSelect.appendChildnewLI；//将新创建的li元素追加到列表中 } }; }; 1. 2. 3.
您需要检查所选内容是否存在并创建它

if( document.getElementById("mySelect") != undefined) {
  document.getElementById("mySelect").remove();
}
var selectList = document.createElement("select");
并映射函数以创建在更改事件句柄中选择的选项

功能更改选项{ var parent=document.getelementsbyclassnammd表单[0]； 如果document.getElementByIdmySelect！=未定义的document.getElementByIdmySelect.remove； var selectList=document.createElementselect； 让选定项=[…选项].filtero=>o.selected.mapo=>{ selectList.id=mySelect； 选择list.multiple=multiple； parent.appendChildselectList； var option=document.createElementoption； option.value=o.value； option.text=o.text； 选择List.AppendChild选项； }; } 1. 2. 3.
您需要检查所选内容是否存在并创建它

if( document.getElementById("mySelect") != undefined) {
  document.getElementById("mySelect").remove();
}
var selectList = document.createElement("select");
并映射函数以创建在更改事件句柄中选择的选项

功能更改选项{ var parent=document.getelementsbyclassnammd表单[0]； 如果document.getElementByIdmySelect！=未定义的document.getElementByIdmySelect.remove； var selectList=document.createElementselect； 让选定项=[…选项].filtero=>o.selected.mapo=>{ selectList.id=mySelect； 选择list.multiple=multiple； parent.appendChildselectList； var option=document.createElementoption； option.value=o.value； option.text=o.text； 选择List.AppendChild选项； }; } 1. 2. 3.
你试过什么/做过什么研究吗？您似乎理解事件是其中的一部分，所以我希望您在那里尝试过一些东西……不，我没有尝试过，因为我不擅长Javascript。到目前为止，我只研究Java的后端。你试过什么/做过什么研究吗？您似乎理解事件是其中的一部分，所以我希望您在那里尝试过一些东西……不，我没有尝试过，因为我不擅长Javascript。到目前为止，我只研究Java的后端。