在html中向ul li添加多选答案

【问题标题】：adding multiselection to ul li in html在html中向ul li添加多选
【发布时间】：2020-09-03 14:52:49
【问题描述】：

下面是我用来创建<ul> 列表的sn-p。我将在 jQuery 的帮助下添加<li>。请帮助我了解如何将多选添加到<li> 项目。

<div class="projects">
     <ul class="menu" id="projects-menu">
  
     </ul>
</div>

li 元素添加如下

$('#projects-menu').append("<li id='li-select' value = '"+String.raw`${value[projectName]}`+"'>"+projectName+"</li>")

结果如图所示。

【问题讨论】：

如果您可以使用插件：jqueryscript.net/form/…

标签： javascript html jquery

【解决方案1】：

这在这里有效。先导入jQuery，用select标签代替ul：

    <script type="text/javascript">
        $(document).ready(function () {

var options = ['Apple', 'Banana', 'Orange'];

$("#projects-menu").append(new Option('Select a fruit', 0, true, true)).trigger("change"); 
// Default option

options.forEach(o => $("#projects-menu").append(new Option(o, o, false, false)).trigger("change"));

$("#projects-menu").on("change", function () {
                const selectedValue = $(this).val();
                console.log(selectedValue);
            });
        })
    </script>

【讨论】：

哦，好吧，所以您可以使用像var selectedItems = []; 这样的变量并向其中添加和删除选定的项目。 $('li').on("click", function() { selectedItems.push($(this)) })

【解决方案2】：

我们可以使用以下步骤： -1st 你可以把 jQuery 链接放在 head 部分

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.map"></script>
</head>
<body>
</body>
</html>

第二步是使用 id 属性然后我们可以使用 javascript 一个 JSON.JS

【讨论】：