Jscore/addarray/ind.html at master · Gitart/Jscore · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <style>
   a{
    text-decoration: none;
    color:black;
   }
  </style>

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

         var data = [
                      {id:1,  title:"Contacts",   url:"http://page.html",    ico:"⚠" },
                      {id:2,  title:"contracts",  url:"http://page.html",    ico:"🎁"},
                      {id:3,  title:"Dictionary", url:"http://page.html",    ico:"👍"},
                      {id:4,  title:"Orders",     url:"http://page.html",    ico:"🎶"},
                      {id:5,  title:"Reports",    url:"http://page.html",    ico:"😊"},
                      {id:6,  title:"Setting",    url:"http://page.html",    ico:"🎭"},
                      {id:7,  title:"Prints",     url:"http://page.html",    ico:"🧶"},
                      {id:8,  title:"Users",      url:"http://page.html",    ico:"✨"},
                      {id:9,  title:"Units",      url:"http://page.html",    ico:"🎗"},
                      {id:10, title:"System",     url:"http://page.html",    ico:"🎨"},
                      {id:11, title:"Notif",      url:"http://page.html",    ico:"👓"},
                      {id:12, title:"Remark",     url:"http://page.html",    ico:"🧵"},
          ]

         var dt = {
                   title:"from",
                   dat: data,
         }

             console.log(dt.title)
             console.log(dt.dat[0])

            var myList = $("#myList");

            if (data.length) {
                $.each(data, function(index, item) {
                       console.log(item.title)
                    // myList.append(`<li val="${item.id}">${item.ico} ${item.title} [${item.id}] </li>`);
                       myList.append(Thm(item))
                });
            } else {
                    console.error("UL element not found.");
            }

			$("#btn01").one("click", function() {
                 alert("One click")
			})


			$("#btn02").one("click", function() {
                 Addelement()
			})


        })


        function Thm(o) {
              var r = `<li val="${o.id}"> <a href="${o.url}">${o.ico} ${o.title} [${o.id}]</a> </li>`
              return r
        }

		function Addelement(){
		  var sl = $("#sel01")
		  var gr1     = "<optgroup label='Yabloko'>"
		  var gr1_end = "</optgroup>"
		  var grp

    		var info = [
              {info_name: 'Фрукты и овощи'},
			  {info_name: 'Йогурты и кефир'},
			  {info_name: 'Яблоки и овощи'},
              {info_name: 'Молоко и кефир'}
            ];


		    var optgroup = "<optgroup label='Питание группы'>";
			for (var i = 0; i < info.length; i++) {
				name      = info[i].info_name;
				optgroup += "<option value='" + name + "'>" + name + "</option>"
			}
			optgroup += "</optgroup>"


		  sl.append("<optgroup label='🎆 Тыква'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>")
		  sl.append("<optgroup label='🎟 Груша'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>")

		  grp=gr1 +"<option>Test node 31</option>" + "<option>Test node 42</option>" + "<option>Test node 53</option>" + gr1_end

		  sl.append(grp)

		  grp = "<optgroup label='Запеканка тестовая'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>"

		  sl.append(grp)
		  		  sl.append(optgroup)
		}
  </script>
</head>
<body>

    <div class="container">
          <h3>Dictionary</h3>
          <hr>
          <ul id="myList"></ul>
    </div>

    <input id="btn01" type="button" value="One press"></input>
    <input id="btn02" type="button" value="Заполнение списка динамически"></input>
	<br>
	<select id="sel01">
	    <option>Set fruits</option>
		<option>Other meal products </option>

	</select>

</body>
</hrml>