adding multiselection to ul li in html

Question

Below is a snippet I used to create a <ul> list. I will be adding <li> with the help of jQuery. Please help me with how to add multi-selection to <li> items.

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

li elements are added as below

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

The result is something as shown in the image.

Answer 1

This works here. Import jQuery first and use a select tag instead of 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>

Answer 2

We can use this follow steps: -1st you can put jQuery links in the head section

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

2nd step is to use with an id attribute then we can use javascript a JSON.JS

adding multiselection to ul li in html

Question

2 answers

solution1
0 2020-09-02 03:14:08

solution2
-1 2020-09-02 03:17:56

adding multiselection to ul li in html

Question

2 answers

solution1 0 2020-09-02 03:14:08

solution2 -1 2020-09-02 03:17:56

solution1
0 2020-09-02 03:14:08

solution2
-1 2020-09-02 03:17:56