在列表中显示所选项目
[英]Display selected items in a list
问题描述
How to display selected items in a list?
如何在列表中显示选定的项目？
So that the elements selected in the selector are displayed in the list below it.这样选择器中选择的元素就会显示在它下面的列表中。
Example code:示例代码：
<!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>
What should be the result:结果应该是什么：
<!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>
4 个解决方案
解决方案1
2 已采纳 2020-05-04 23:43:06
You need check your selected is exist or not and create it.您需要检查您选择的是否存在并创建它。
if( document.getElementById("mySelect") != undefined) {
document.getElementById("mySelect").remove();
}
var selectList = document.createElement("select");
And you map function to create options selected in change event handle as而您map function 创建在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>
解决方案2
1 2020-05-04 23:23:11
Another approach is to do something like that (added notes inside the code):另一种方法是做类似的事情（在代码中添加注释）：
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>
Hope that helps!希望有帮助！
解决方案3
0 2020-05-04 19:05:55
I was thinking that you could use JavaScript (JS) as a way to get the items that are selected and paste them elsewhere (wherever you want).我在想你可以使用 JavaScript (JS) 作为获取被选择的项目并将它们粘贴到其他地方（任何你想要的地方）的方法。
Try this:尝试这个：
<!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>
Then add JS:然后添加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);
}
Please tell me if this works, as it might not.请告诉我这是否有效，因为它可能无效。 After all, I'm just an 8-year old, and just starting to learning web development.毕竟我才8岁，刚开始学习web开发。
解决方案4
0 2020-05-04 22:27:12
You could use the following:您可以使用以下内容：
<!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>
Working fiddle: https://jsfiddle.net/1j7a9h35/工作小提琴： https://jsfiddle.net/1j7a9h35/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.