simp-select 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/simpleSelect.js +1 -1
- package/dist/types/simpleSelect.types.d.ts +1 -1
- package/docs/index.html +1355 -0
- package/docs/style.css +29 -0
- package/package.json +1 -1
- package/src/const/simpleSelection.const.ts +1 -1
- package/src/simpleSelectItemDOM.ts +7 -1
- package/src/types/simpleSelect.types.ts +1 -1
package/docs/index.html
ADDED
|
@@ -0,0 +1,1355 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport"
|
|
6
|
+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
+
<title>Example SimpSelect</title>
|
|
9
|
+
|
|
10
|
+
<link rel="stylesheet" href="./style.css">
|
|
11
|
+
|
|
12
|
+
<link rel="stylesheet" href="https://unpkg.com/simp-select@1.0.17/dist/style.css">
|
|
13
|
+
<script src="https://unpkg.com/simp-select"></script>
|
|
14
|
+
|
|
15
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
|
16
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
17
|
+
|
|
18
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify.min.js"></script>
|
|
19
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-css.min.js"></script>
|
|
20
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.11/beautify-html.min.js"></script>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<script>
|
|
24
|
+
const options = {
|
|
25
|
+
"indent_size": 4,
|
|
26
|
+
"html": {
|
|
27
|
+
"end_with_newline": false,
|
|
28
|
+
"attributes": {
|
|
29
|
+
|
|
30
|
+
},
|
|
31
|
+
"indent_size": 2,
|
|
32
|
+
"indent_char": " ",
|
|
33
|
+
"wrap_attributes": "force-aligned",
|
|
34
|
+
"beautifiers": [
|
|
35
|
+
"JS-Beautify"
|
|
36
|
+
],
|
|
37
|
+
"js": {
|
|
38
|
+
"indent_size": 2
|
|
39
|
+
},
|
|
40
|
+
"css": {
|
|
41
|
+
"indent_size": 2
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"css": {
|
|
45
|
+
"indent_size": 1
|
|
46
|
+
},
|
|
47
|
+
"js": {
|
|
48
|
+
"preserve-newlines": true
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function getHtml(id) {
|
|
53
|
+
return hljs.highlight(html_beautify(document.getElementById(id).innerHTML, options),
|
|
54
|
+
{ language: 'html' }
|
|
55
|
+
).value
|
|
56
|
+
}
|
|
57
|
+
function pasteCode(data) {
|
|
58
|
+
const codeElem = document.getElementById(data.codeId);
|
|
59
|
+
|
|
60
|
+
codeElem.innerHTML = getHtml(data.firstId);
|
|
61
|
+
|
|
62
|
+
if (data.secondId) {
|
|
63
|
+
let lineBreak;
|
|
64
|
+
if ('lineBreak' in data) {
|
|
65
|
+
lineBreak = data.lineBreak;
|
|
66
|
+
} else if( 'lineBreakText' in data ) {
|
|
67
|
+
lineBreak = '\n\n' + data.lineBreakText + '\n\n';
|
|
68
|
+
} else {
|
|
69
|
+
lineBreak = '\n\n';
|
|
70
|
+
}
|
|
71
|
+
codeElem.innerHTML += lineBreak;
|
|
72
|
+
codeElem.innerHTML += getHtml(data.secondId);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
function getSelectValues(select) {
|
|
76
|
+
var result = [];
|
|
77
|
+
var options = select && select.options;
|
|
78
|
+
var opt;
|
|
79
|
+
|
|
80
|
+
for (var i=0, iLen=options.length; i<iLen; i++) {
|
|
81
|
+
opt = options[i];
|
|
82
|
+
|
|
83
|
+
if (opt.selected) {
|
|
84
|
+
result.push(opt.value || opt.text);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return result;
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
<div class="container">
|
|
91
|
+
<details>
|
|
92
|
+
<summary class="description">Select/multiselect without setting</summary>
|
|
93
|
+
|
|
94
|
+
<pre class="code"><code class="language-html" id="code_1"></code></pre>
|
|
95
|
+
|
|
96
|
+
</details>
|
|
97
|
+
|
|
98
|
+
<div class="items">
|
|
99
|
+
<div class="item" id="example_1_1">
|
|
100
|
+
<select class="jsSimpSelect">
|
|
101
|
+
<option value="item-1">Select 1</option>
|
|
102
|
+
<option value="item-2">Select 2</option>
|
|
103
|
+
<option value="item-3">Select 3</option>
|
|
104
|
+
<option value="item-4">Select 4</option>
|
|
105
|
+
</select>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="item" id="example_1_2">
|
|
108
|
+
<select
|
|
109
|
+
class="jsSimpSelect"
|
|
110
|
+
multiple
|
|
111
|
+
data-simple-placeholder="Multiselect"
|
|
112
|
+
>
|
|
113
|
+
<option value="item-1">Multiselect 1</option>
|
|
114
|
+
<option value="item-2">Multiselect 2</option>
|
|
115
|
+
<option value="item-3">Multiselect 3</option>
|
|
116
|
+
<option value="item-4">Multiselect 4</option>
|
|
117
|
+
</select>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<script>
|
|
121
|
+
pasteCode({
|
|
122
|
+
codeId: 'code_1',
|
|
123
|
+
firstId: 'example_1_1',
|
|
124
|
+
secondId: 'example_1_2',
|
|
125
|
+
lineBreakText: '\nMultiselect:'
|
|
126
|
+
});
|
|
127
|
+
</script>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="container">
|
|
131
|
+
<details>
|
|
132
|
+
<summary class="description">Custom FLOAT (min 1500px) </summary>
|
|
133
|
+
<pre class="code"><code class="language-html" id="code_2"></code></pre>
|
|
134
|
+
</details>
|
|
135
|
+
|
|
136
|
+
<div class="items">
|
|
137
|
+
<div class="item" id="example_2_1">
|
|
138
|
+
<select
|
|
139
|
+
class="jsSimpSelect"
|
|
140
|
+
multiple
|
|
141
|
+
data-simple-placeholder="custom width float"
|
|
142
|
+
data-simple-float-width="1500"
|
|
143
|
+
>
|
|
144
|
+
<option value="custom-1">custom float 1</option>
|
|
145
|
+
<option value="custom-2">custom float 2</option>
|
|
146
|
+
</select>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="item" id="example_2_2">
|
|
150
|
+
<select
|
|
151
|
+
id="example_2_2_select"
|
|
152
|
+
multiple
|
|
153
|
+
data-simple-placeholder="custom width float"
|
|
154
|
+
>
|
|
155
|
+
<option value="custom-1">custom float 2-1</option>
|
|
156
|
+
<option value="custom-2">custom float 2-2</option>
|
|
157
|
+
</select>
|
|
158
|
+
<script>
|
|
159
|
+
window.addEventListener('load', () => {
|
|
160
|
+
new SimpleSelect('#example_2_2_select', {
|
|
161
|
+
floatWidth: 1500
|
|
162
|
+
})
|
|
163
|
+
})
|
|
164
|
+
</script>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<script>
|
|
168
|
+
pasteCode({
|
|
169
|
+
codeId: 'code_2',
|
|
170
|
+
firstId: 'example_2_1',
|
|
171
|
+
secondId: 'example_2_2',
|
|
172
|
+
lineBreakText: 'OR'
|
|
173
|
+
});
|
|
174
|
+
</script>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
<div class="container">
|
|
180
|
+
<details>
|
|
181
|
+
<summary class="description">Cancel FLOAT (default <= 767)</summary>
|
|
182
|
+
<pre class="code"><code class="language-html" id="code_3"></code></pre>
|
|
183
|
+
</details>
|
|
184
|
+
|
|
185
|
+
<div class="items">
|
|
186
|
+
<div class="item" id="example_3_1">
|
|
187
|
+
<select
|
|
188
|
+
class="jsSimpSelect"
|
|
189
|
+
multiple
|
|
190
|
+
data-simple-float-none="true"
|
|
191
|
+
data-simple-placeholder="Cancel float"
|
|
192
|
+
>
|
|
193
|
+
<optgroup label="Group 1" >
|
|
194
|
+
<option value="none float">Cancel float - 1.1</option>
|
|
195
|
+
<option value="none float">Cancel float - 1.2</option>
|
|
196
|
+
</optgroup>
|
|
197
|
+
<optgroup label="Group 2" >
|
|
198
|
+
<option value="none float">Cancel float - 1.1.1</option>
|
|
199
|
+
<option value="none float">Cancel float - 1.2.2</option>
|
|
200
|
+
</optgroup>
|
|
201
|
+
</select>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="item" id="example_3_2">
|
|
205
|
+
<select
|
|
206
|
+
multiple
|
|
207
|
+
id="example_3_2_select"
|
|
208
|
+
data-simple-placeholder="custom width float"
|
|
209
|
+
>
|
|
210
|
+
<option value="none float">Cancel float - 2.1</option>
|
|
211
|
+
<option value="none float">Cancel float - 2.2</option>
|
|
212
|
+
</select>
|
|
213
|
+
<script>
|
|
214
|
+
window.addEventListener('load', () => {
|
|
215
|
+
new SimpleSelect('#example_3_2_select', {
|
|
216
|
+
floatWidth: 0
|
|
217
|
+
})
|
|
218
|
+
})
|
|
219
|
+
</script>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<script>
|
|
223
|
+
pasteCode({
|
|
224
|
+
codeId: 'code_3',
|
|
225
|
+
firstId: 'example_2_1',
|
|
226
|
+
secondId: 'example_2_2',
|
|
227
|
+
lineBreakText: 'OR'
|
|
228
|
+
});
|
|
229
|
+
</script>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div class="container">
|
|
234
|
+
<details>
|
|
235
|
+
<summary class="description">Not show selected titles</summary>
|
|
236
|
+
<pre class="code"><code class="language-html" id="code_4"></code></pre>
|
|
237
|
+
</details>
|
|
238
|
+
|
|
239
|
+
<div class="items">
|
|
240
|
+
<div class="item_full" id="example_4">
|
|
241
|
+
<select
|
|
242
|
+
class="jsSimpSelect"
|
|
243
|
+
data-simple-is-only-placeholder="true"
|
|
244
|
+
data-simple-placeholder="Always show this title"
|
|
245
|
+
multiple>
|
|
246
|
+
<option value="a1">Item 1</option>
|
|
247
|
+
<option value="a2">Item 2</option>
|
|
248
|
+
<option value="a3">Item 3</option>
|
|
249
|
+
<option value="a4">Item 4</option>
|
|
250
|
+
<option value="a5">Item 5</option>
|
|
251
|
+
</select>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<script>
|
|
256
|
+
pasteCode({
|
|
257
|
+
codeId: 'code_4',
|
|
258
|
+
firstId: 'example_4',
|
|
259
|
+
});
|
|
260
|
+
</script>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
<div class="container">
|
|
266
|
+
<details>
|
|
267
|
+
<summary class="description">Confirm selected</summary>
|
|
268
|
+
<pre class="code"><code class="language-html" id="code_5"></code></pre>
|
|
269
|
+
</details>
|
|
270
|
+
|
|
271
|
+
<div class="items">
|
|
272
|
+
<div class="item_full" id="example_5_1">
|
|
273
|
+
<select multiple
|
|
274
|
+
class="jsSimpSelect"
|
|
275
|
+
data-simple-placeholder="custom placeholder"
|
|
276
|
+
data-simple-is-confirm="true"
|
|
277
|
+
>
|
|
278
|
+
<option value="Item 1">Item 1</option>
|
|
279
|
+
<option value="Item 2" disabled="disabled">Item 2 disabled</option>
|
|
280
|
+
<option value="Item 3">Item 3</option>
|
|
281
|
+
<option value="Item 4">Item 4</option>
|
|
282
|
+
<option value="Item 5">Item 5</option>
|
|
283
|
+
</select>
|
|
284
|
+
</div>
|
|
285
|
+
<script>
|
|
286
|
+
pasteCode({
|
|
287
|
+
codeId: 'code_5',
|
|
288
|
+
firstId: 'example_5_1',
|
|
289
|
+
});
|
|
290
|
+
</script>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
<div class="container">
|
|
295
|
+
<details>
|
|
296
|
+
<summary class="description">Confirm selected (js initialization)</summary>
|
|
297
|
+
<pre class="code"><code class="language-html" id="code_6"></code></pre>
|
|
298
|
+
</details>
|
|
299
|
+
|
|
300
|
+
<div class="items">
|
|
301
|
+
<div class="item" id="example_6_1">
|
|
302
|
+
<select multiple
|
|
303
|
+
id="example_6_1_select"
|
|
304
|
+
data-simple-placeholder="custom placeholder"
|
|
305
|
+
data-simple-is-confirm="true"
|
|
306
|
+
>
|
|
307
|
+
<option value="Item 1">Item 1</option>
|
|
308
|
+
<option value="Item 2" disabled="disabled">Item 2 disabled</option>
|
|
309
|
+
<option value="Item 3">Item 3</option>
|
|
310
|
+
<option value="Item 4">Item 4</option>
|
|
311
|
+
<option value="Item 5">Item 5</option>
|
|
312
|
+
</select>
|
|
313
|
+
<script>
|
|
314
|
+
window.addEventListener('load', () => {
|
|
315
|
+
new SimpleSelect('#example_6_1_select', {
|
|
316
|
+
isConfirmInMulti: true,
|
|
317
|
+
})
|
|
318
|
+
})
|
|
319
|
+
</script>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="item" id="example_6_2">
|
|
322
|
+
<select multiple
|
|
323
|
+
id="example_6_2_select"
|
|
324
|
+
data-simple-placeholder="custom placeholder"
|
|
325
|
+
data-simple-is-confirm="true"
|
|
326
|
+
>
|
|
327
|
+
<option value="Item 1">Item 1</option>
|
|
328
|
+
<option value="Item 2" disabled="disabled">Item 2 disabled</option>
|
|
329
|
+
<option value="Item 3">Item 3</option>
|
|
330
|
+
<option value="Item 4">Item 4</option>
|
|
331
|
+
<option value="Item 5">Item 5</option>
|
|
332
|
+
</select>
|
|
333
|
+
<script>
|
|
334
|
+
window.addEventListener('load', () => {
|
|
335
|
+
new SimpleSelect('#example_6_2_select', {
|
|
336
|
+
isConfirmInMulti: true,
|
|
337
|
+
isConfirmInMultiOkClickOutside: true
|
|
338
|
+
})
|
|
339
|
+
})
|
|
340
|
+
</script>
|
|
341
|
+
</div>
|
|
342
|
+
<script>
|
|
343
|
+
pasteCode({
|
|
344
|
+
codeId: 'code_6',
|
|
345
|
+
firstId: 'example_6_1',
|
|
346
|
+
secondId: 'example_6_2',
|
|
347
|
+
lineBreakText: '\n<strong>Confirm by click outside:<strong>'
|
|
348
|
+
});
|
|
349
|
+
</script>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<div class="container">
|
|
354
|
+
<details>
|
|
355
|
+
<summary class="description">Show number of selected titles (default: 3)</summary>
|
|
356
|
+
<pre class="code"><code class="language-html" id="code_7"></code></pre>
|
|
357
|
+
</details>
|
|
358
|
+
|
|
359
|
+
<div class="items">
|
|
360
|
+
<div class="item" id="example_7_1">
|
|
361
|
+
<select multiple
|
|
362
|
+
class="jsSimpSelect"
|
|
363
|
+
data-simple-placeholder="custom placeholder"
|
|
364
|
+
data-simple-count-shows-selected="2"
|
|
365
|
+
>
|
|
366
|
+
<option value="Item 1">Item 1</option>
|
|
367
|
+
<option value="Item 2">Item 2</option>
|
|
368
|
+
<option value="Item 3">Item 3</option>
|
|
369
|
+
<option value="Item 4">Item 4</option>
|
|
370
|
+
<option value="Item 5">Item 5</option>
|
|
371
|
+
</select>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="item" id="example_7_2">
|
|
374
|
+
<select multiple
|
|
375
|
+
id="example_7_2_select"
|
|
376
|
+
data-simple-placeholder="custom placeholder"
|
|
377
|
+
>
|
|
378
|
+
<option value="Item 1">Item 1</option>
|
|
379
|
+
<option value="Item 2">Item 2 </option>
|
|
380
|
+
<option value="Item 3">Item 3</option>
|
|
381
|
+
<option value="Item 4">Item 4</option>
|
|
382
|
+
<option value="Item 5">Item 5</option>
|
|
383
|
+
</select>
|
|
384
|
+
<script>
|
|
385
|
+
window.addEventListener('load', () => {
|
|
386
|
+
new SimpleSelect('#example_7_2_select', {
|
|
387
|
+
countShowSelected: 2
|
|
388
|
+
})
|
|
389
|
+
})
|
|
390
|
+
</script>
|
|
391
|
+
</div>
|
|
392
|
+
<script>
|
|
393
|
+
pasteCode({
|
|
394
|
+
codeId: 'code_7',
|
|
395
|
+
firstId: 'example_7_1',
|
|
396
|
+
secondId: 'example_7_2',
|
|
397
|
+
});
|
|
398
|
+
</script>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
<div class="container">
|
|
404
|
+
<details>
|
|
405
|
+
<summary class="description">HTML content (after and before) in option (only DOM elements)</summary>
|
|
406
|
+
<pre class="code"><code class="language-html" id="code_8"></code></pre>
|
|
407
|
+
</details>
|
|
408
|
+
|
|
409
|
+
<div class="items">
|
|
410
|
+
<div class="item" id="example_8_1">
|
|
411
|
+
<select
|
|
412
|
+
class="jsSimpSelect"
|
|
413
|
+
multiple
|
|
414
|
+
>
|
|
415
|
+
<option value="item 1"
|
|
416
|
+
data-simple-html-before="<span>|before| </span>"
|
|
417
|
+
data-simple-html-after="<span> |after|</div>"
|
|
418
|
+
>Item 1</option>
|
|
419
|
+
<option value="item 2"
|
|
420
|
+
data-simple-html-after="<strong> |after|</strong>"
|
|
421
|
+
>Item 2</option>
|
|
422
|
+
<option value="item 3"
|
|
423
|
+
data-simple-html-before="<span> |before|</div>"
|
|
424
|
+
>Item 3</option>
|
|
425
|
+
<option value="item 4">Item 4</option>
|
|
426
|
+
<option value="item 5"
|
|
427
|
+
data-simple-html-before="<i>|before| </i>"
|
|
428
|
+
data-simple-html-after="<span> |after|</div>"
|
|
429
|
+
>Item 5</option>
|
|
430
|
+
</select>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="item" id="example_8_2">
|
|
433
|
+
<select
|
|
434
|
+
class="jsSimpSelect"
|
|
435
|
+
>
|
|
436
|
+
<option value="item 1"
|
|
437
|
+
data-simple-html-before="<span>|before| </span>"
|
|
438
|
+
data-simple-html-after="<span> |after|</div>"
|
|
439
|
+
>Item 1</option>
|
|
440
|
+
<option value="item 2"
|
|
441
|
+
data-simple-html-after="<strong> |after|</strong>"
|
|
442
|
+
>Item 2</option>
|
|
443
|
+
<option value="item 3"
|
|
444
|
+
data-simple-html-before="<span> |before|</div>"
|
|
445
|
+
>Item 3</option>
|
|
446
|
+
<option value="item 4">Item 4</option>
|
|
447
|
+
<option value="item 5"
|
|
448
|
+
data-simple-html-before="<i>|before| </i>"
|
|
449
|
+
data-simple-html-after="<span> |after|</div>"
|
|
450
|
+
>Item 5</option>
|
|
451
|
+
</select>
|
|
452
|
+
</div>
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
<script>
|
|
456
|
+
pasteCode({
|
|
457
|
+
codeId: 'code_8',
|
|
458
|
+
firstId: 'example_8_1',
|
|
459
|
+
secondId: 'example_8_2',
|
|
460
|
+
});
|
|
461
|
+
</script>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<div class="container">
|
|
466
|
+
<details>
|
|
467
|
+
<summary class="description">HTML content (after and before) for all options (only DOM elements) </summary>
|
|
468
|
+
<pre class="code"><code class="language-html" id="code_8_3"></code></pre>
|
|
469
|
+
</details>
|
|
470
|
+
|
|
471
|
+
<div class="items">
|
|
472
|
+
<div class="item" id="example_8_3">
|
|
473
|
+
<select
|
|
474
|
+
class="jsSimpSelect"
|
|
475
|
+
data-simple-item-html-before="<span style='margin-right: 10px'>before</span>"
|
|
476
|
+
multiple
|
|
477
|
+
>
|
|
478
|
+
<option value="item 1">Item 1</option>
|
|
479
|
+
<option value="item 2">Item 2</option>
|
|
480
|
+
<option value="item 3">Item 3</option>
|
|
481
|
+
<option value="item 4">Item 4</option>
|
|
482
|
+
<option value="item 4">Item 4</option>
|
|
483
|
+
|
|
484
|
+
</select>
|
|
485
|
+
</div>
|
|
486
|
+
<div class="item" id="example_8_4">
|
|
487
|
+
<select
|
|
488
|
+
class="jsSimpSelect"
|
|
489
|
+
multiple
|
|
490
|
+
data-simple-item-html-after="<span style='padding-left: 10px; color: darkorange'>after</span>"
|
|
491
|
+
>
|
|
492
|
+
<option value="item 1">Item 1</option>
|
|
493
|
+
<option value="item 2">Item 2</option>
|
|
494
|
+
<option value="item 3">Item 3</option>
|
|
495
|
+
<option value="item 4">Item 4</option>
|
|
496
|
+
<option value="item 4">Item 4</option>
|
|
497
|
+
|
|
498
|
+
</select>
|
|
499
|
+
</div>
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
<script>
|
|
503
|
+
pasteCode({
|
|
504
|
+
codeId: 'code_8_3',
|
|
505
|
+
firstId: 'example_8_3',
|
|
506
|
+
secondId: 'example_8_3',
|
|
507
|
+
});
|
|
508
|
+
</script>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
|
|
512
|
+
|
|
513
|
+
<div class="container">
|
|
514
|
+
<details>
|
|
515
|
+
<summary class="description">Select All</summary>
|
|
516
|
+
<pre class="code"><code class="language-html" id="code_9"></code></pre>
|
|
517
|
+
</details>
|
|
518
|
+
|
|
519
|
+
<div class="items">
|
|
520
|
+
<div class="item" id="example_9_1">
|
|
521
|
+
<select
|
|
522
|
+
class="jsSimpSelect"
|
|
523
|
+
multiple
|
|
524
|
+
data-simple-placeholder="Select all"
|
|
525
|
+
>
|
|
526
|
+
<optgroup label="Группа 1">
|
|
527
|
+
<option value="1.1">multiple Опция 1.1</option>
|
|
528
|
+
</optgroup>
|
|
529
|
+
<optgroup label="Группа 2">
|
|
530
|
+
<option value="2.1">multiple Опция 2.1</option>
|
|
531
|
+
<option value="2.2">multiple Опция 2.2</option>
|
|
532
|
+
</optgroup>
|
|
533
|
+
<optgroup label="Группа 3" disabled>
|
|
534
|
+
<option value="3.1">multiple Опция 3.1</option>
|
|
535
|
+
<option value="3.2">multiple Опция 3.2</option>
|
|
536
|
+
<option value="3.3">multiple Опция 3.3</option>
|
|
537
|
+
</optgroup>
|
|
538
|
+
</select>
|
|
539
|
+
</div>
|
|
540
|
+
|
|
541
|
+
<div class="item" id="example_9_2">
|
|
542
|
+
<select
|
|
543
|
+
multiple
|
|
544
|
+
id="example_9_2_select"
|
|
545
|
+
data-simple-placeholder="Select all"
|
|
546
|
+
>
|
|
547
|
+
<option value="Item 1">Item 1</option>
|
|
548
|
+
<option value="Item 2">Item 2</option>
|
|
549
|
+
<option value="Item 3">Item 3</option>
|
|
550
|
+
<option value="Item 4">Item 4</option>
|
|
551
|
+
<option value="Item 5">Item 5</option>
|
|
552
|
+
<option value="Item 6">Item 6</option>
|
|
553
|
+
</select>
|
|
554
|
+
<script>
|
|
555
|
+
window.addEventListener('load', () => {
|
|
556
|
+
new SimpleSelect('#example_9_2_select', {
|
|
557
|
+
selectAll: true
|
|
558
|
+
})
|
|
559
|
+
})
|
|
560
|
+
</script>
|
|
561
|
+
</div>
|
|
562
|
+
|
|
563
|
+
<script>
|
|
564
|
+
pasteCode({
|
|
565
|
+
codeId: 'code_9',
|
|
566
|
+
firstId: 'example_9_1',
|
|
567
|
+
secondId: 'example_9_2',
|
|
568
|
+
lineBreakText: 'OR'
|
|
569
|
+
});
|
|
570
|
+
</script>
|
|
571
|
+
</div>
|
|
572
|
+
</div>
|
|
573
|
+
|
|
574
|
+
<div class="container">
|
|
575
|
+
<details>
|
|
576
|
+
<summary class="description">Reset All</summary>
|
|
577
|
+
<pre class="code"><code class="language-html" id="code_10"></code></pre>
|
|
578
|
+
</details>
|
|
579
|
+
|
|
580
|
+
<div class="items">
|
|
581
|
+
<div class="item" id="example_10_1">
|
|
582
|
+
<select
|
|
583
|
+
class="jsSimpSelect"
|
|
584
|
+
multiple
|
|
585
|
+
data-simple-reset-all="true"
|
|
586
|
+
data-simple-placeholder="Reset all"
|
|
587
|
+
>
|
|
588
|
+
<optgroup label="Группа 1">
|
|
589
|
+
<option value="1.1">multiple Опция 1.1</option>
|
|
590
|
+
</optgroup>
|
|
591
|
+
<optgroup label="Группа 2">
|
|
592
|
+
<option value="2.1">multiple Опция 2.1</option>
|
|
593
|
+
<option value="2.2">multiple Опция 2.2</option>
|
|
594
|
+
</optgroup>
|
|
595
|
+
<optgroup label="Группа 3" disabled>
|
|
596
|
+
<option value="3.1">multiple Опция 3.1</option>
|
|
597
|
+
<option value="3.2">multiple Опция 3.2</option>
|
|
598
|
+
<option value="3.3">multiple Опция 3.3</option>
|
|
599
|
+
</optgroup>
|
|
600
|
+
</select>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<div class="item" id="example_10_2">
|
|
604
|
+
<select
|
|
605
|
+
multiple
|
|
606
|
+
id="example_10_2_select"
|
|
607
|
+
data-simple-placeholder="Reset all"
|
|
608
|
+
>
|
|
609
|
+
<option value="Item 1">Item 1</option>
|
|
610
|
+
<option value="Item 2">Item 2</option>
|
|
611
|
+
<option value="Item 3">Item 3</option>
|
|
612
|
+
<option value="Item 4">Item 4</option>
|
|
613
|
+
<option value="Item 5">Item 5</option>
|
|
614
|
+
<option value="Item 6">Item 6</option>
|
|
615
|
+
</select>
|
|
616
|
+
<script>
|
|
617
|
+
window.addEventListener('load', () => {
|
|
618
|
+
new SimpleSelect('#example_10_2_select', {
|
|
619
|
+
resetAll: true
|
|
620
|
+
})
|
|
621
|
+
})
|
|
622
|
+
</script>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<script>
|
|
626
|
+
pasteCode({
|
|
627
|
+
codeId: 'code_10',
|
|
628
|
+
firstId: 'example_10_1',
|
|
629
|
+
secondId: 'example_10_2',
|
|
630
|
+
lineBreakText: 'OR'
|
|
631
|
+
});
|
|
632
|
+
</script>
|
|
633
|
+
</div>
|
|
634
|
+
</div>
|
|
635
|
+
|
|
636
|
+
<div class="container">
|
|
637
|
+
<details>
|
|
638
|
+
<summary class="description">Select and Reset All</summary>
|
|
639
|
+
<pre class="code"><code class="language-html" id="code_11"></code></pre>
|
|
640
|
+
</details>
|
|
641
|
+
|
|
642
|
+
<div class="items">
|
|
643
|
+
<div class="item" id="example_11_1">
|
|
644
|
+
<select
|
|
645
|
+
class="jsSimpSelect"
|
|
646
|
+
multiple
|
|
647
|
+
data-simple-select-all="true"
|
|
648
|
+
data-simple-reset-all="true"
|
|
649
|
+
data-simple-placeholder="Select and reset"
|
|
650
|
+
>
|
|
651
|
+
<option value="Item 1">Item 1</option>
|
|
652
|
+
<option value="Item 2">Item 2</option>
|
|
653
|
+
<option value="Item 3" disabled>Item 3</option>
|
|
654
|
+
<option value="Item 4">Item 4</option>
|
|
655
|
+
<option value="Item 5">Item 5</option>
|
|
656
|
+
<option value="Item 6">Item 6</option>
|
|
657
|
+
</select>
|
|
658
|
+
</div>
|
|
659
|
+
|
|
660
|
+
<div class="item" id="example_11_2">
|
|
661
|
+
<select
|
|
662
|
+
multiple
|
|
663
|
+
id="example_11_2_select"
|
|
664
|
+
data-simple-placeholder="Select and reset"
|
|
665
|
+
>
|
|
666
|
+
<option value="Item 1">Item 1</option>
|
|
667
|
+
<option value="Item 2">Item 2</option>
|
|
668
|
+
<option value="Item 3">Item 3</option>
|
|
669
|
+
<option value="Item 4">Item 4</option>
|
|
670
|
+
<option value="Item 5">Item 5</option>
|
|
671
|
+
<option value="Item 6">Item 6</option>
|
|
672
|
+
</select>
|
|
673
|
+
<script>
|
|
674
|
+
window.addEventListener('load', () => {
|
|
675
|
+
new SimpleSelect('#example_11_2_select', {
|
|
676
|
+
selectAll: true,
|
|
677
|
+
resetAll: true
|
|
678
|
+
})
|
|
679
|
+
})
|
|
680
|
+
</script>
|
|
681
|
+
</div>
|
|
682
|
+
|
|
683
|
+
<script>
|
|
684
|
+
pasteCode({
|
|
685
|
+
codeId: 'code_11',
|
|
686
|
+
firstId: 'example_11_1',
|
|
687
|
+
secondId: 'example_11_2',
|
|
688
|
+
lineBreakText: 'OR'
|
|
689
|
+
});
|
|
690
|
+
</script>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
|
|
694
|
+
|
|
695
|
+
|
|
696
|
+
|
|
697
|
+
<div class="container">
|
|
698
|
+
<details>
|
|
699
|
+
<summary class="description">Debounce time (or at closing)</summary>
|
|
700
|
+
<pre class="code"><code class="language-html" id="code_12"></code></pre>
|
|
701
|
+
</details>
|
|
702
|
+
|
|
703
|
+
<div class="items jsDebounceChange">
|
|
704
|
+
<div class="item" id="example_12_1">
|
|
705
|
+
<select
|
|
706
|
+
class="jsSimpSelect"
|
|
707
|
+
multiple
|
|
708
|
+
data-simple-debounce-time="1000"
|
|
709
|
+
data-simple-placeholder="Debounce 1000ms"
|
|
710
|
+
>
|
|
711
|
+
<option value="Item 1">Item 1</option>
|
|
712
|
+
<option value="Item 2">Item 2</option>
|
|
713
|
+
<option value="Item 3">Item 3</option>
|
|
714
|
+
<option value="Item 4">Item 4</option>
|
|
715
|
+
<option value="Item 5">Item 5</option>
|
|
716
|
+
<option value="Item 6">Item 6</option>
|
|
717
|
+
</select>
|
|
718
|
+
</div>
|
|
719
|
+
|
|
720
|
+
<div class="item" id="example_12_2">
|
|
721
|
+
<select
|
|
722
|
+
id="example_12_2_select"
|
|
723
|
+
multiple
|
|
724
|
+
data-simple-placeholder="Debounce 1500ms"
|
|
725
|
+
>
|
|
726
|
+
<option value="Item 1">Item 1</option>
|
|
727
|
+
<option value="Item 2">Item 2</option>
|
|
728
|
+
<option value="Item 3">Item 3</option>
|
|
729
|
+
<option value="Item 4">Item 4</option>
|
|
730
|
+
<option value="Item 5">Item 5</option>
|
|
731
|
+
<option value="Item 6">Item 6</option>
|
|
732
|
+
</select>
|
|
733
|
+
<script>
|
|
734
|
+
window.addEventListener('load', () => {
|
|
735
|
+
new SimpleSelect('#example_12_2_select', {
|
|
736
|
+
debounceTime: 1500
|
|
737
|
+
})
|
|
738
|
+
})
|
|
739
|
+
</script>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
<script>
|
|
743
|
+
document.querySelectorAll('.jsDebounceChange select').forEach(sel => {
|
|
744
|
+
sel.addEventListener('change', () => {
|
|
745
|
+
alert(`select update. New values: ${getSelectValues(sel)}`)
|
|
746
|
+
})
|
|
747
|
+
})
|
|
748
|
+
pasteCode({
|
|
749
|
+
codeId: 'code_12',
|
|
750
|
+
firstId: 'example_12_1',
|
|
751
|
+
secondId: 'example_12_2',
|
|
752
|
+
lineBreakText: 'OR'
|
|
753
|
+
});
|
|
754
|
+
</script>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
|
|
758
|
+
|
|
759
|
+
<div class="container">
|
|
760
|
+
<details>
|
|
761
|
+
<summary class="description">Search</summary>
|
|
762
|
+
<pre class="code"><code class="language-html" id="code_13"></code></pre>
|
|
763
|
+
</details>
|
|
764
|
+
|
|
765
|
+
<div class="items">
|
|
766
|
+
<div class="item" id="example_13_1">
|
|
767
|
+
<select
|
|
768
|
+
class="jsSimpSelect"
|
|
769
|
+
data-simple-select-search="true"
|
|
770
|
+
data-simple-placeholder="Search"
|
|
771
|
+
>
|
|
772
|
+
<option value="Item 1">Item 1</option>
|
|
773
|
+
<option value="Item 2">Item 2</option>
|
|
774
|
+
<option value="Item 3">Item 3</option>
|
|
775
|
+
<option value="Item 4">Item 4</option>
|
|
776
|
+
<option value="Item 5">Item 5</option>
|
|
777
|
+
<option value="Item 6">Item 6</option>
|
|
778
|
+
</select>
|
|
779
|
+
</div>
|
|
780
|
+
|
|
781
|
+
<div class="item" id="example_13_2">
|
|
782
|
+
<select
|
|
783
|
+
id="example_13_2_select"
|
|
784
|
+
multiple
|
|
785
|
+
data-simple-placeholder="Search"
|
|
786
|
+
>
|
|
787
|
+
<option value="Item 1">Item 1</option>
|
|
788
|
+
<option value="Item 2">Item 2</option>
|
|
789
|
+
<option value="Item 3">Item 3</option>
|
|
790
|
+
<option value="Item 4">Item 4</option>
|
|
791
|
+
<option value="Item 5">Item 5</option>
|
|
792
|
+
<option value="Item 6">Item 6</option>
|
|
793
|
+
</select>
|
|
794
|
+
<script>
|
|
795
|
+
window.addEventListener('load', () => {
|
|
796
|
+
new SimpleSelect('#example_13_2_select', {
|
|
797
|
+
isSearch: true
|
|
798
|
+
})
|
|
799
|
+
})
|
|
800
|
+
</script>
|
|
801
|
+
</div>
|
|
802
|
+
|
|
803
|
+
<script>
|
|
804
|
+
pasteCode({
|
|
805
|
+
codeId: 'code_13',
|
|
806
|
+
firstId: 'example_13_1',
|
|
807
|
+
secondId: 'example_13_2',
|
|
808
|
+
lineBreakText: 'OR'
|
|
809
|
+
});
|
|
810
|
+
</script>
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
|
|
814
|
+
<div class="container">
|
|
815
|
+
<details>
|
|
816
|
+
<summary class="description">Search in dropdown</summary>
|
|
817
|
+
<pre class="code"><code class="language-html" id="code_14"></code></pre>
|
|
818
|
+
</details>
|
|
819
|
+
|
|
820
|
+
<div class="items">
|
|
821
|
+
<div class="item" id="example_14_1">
|
|
822
|
+
<select
|
|
823
|
+
class="jsSimpSelect"
|
|
824
|
+
data-simple-select-search-dropdown="true"
|
|
825
|
+
data-simple-placeholder="Search in dropdown"
|
|
826
|
+
>
|
|
827
|
+
<option value="Item 1">Item 1</option>
|
|
828
|
+
<option value="Item 2">Item 2</option>
|
|
829
|
+
<option value="Item 3">Item 3</option>
|
|
830
|
+
<option value="Item 4">Item 4</option>
|
|
831
|
+
<option value="Item 5">Item 5</option>
|
|
832
|
+
<option value="Item 6">Item 6</option>
|
|
833
|
+
</select>
|
|
834
|
+
</div>
|
|
835
|
+
|
|
836
|
+
<div class="item" id="example_14_2">
|
|
837
|
+
<select
|
|
838
|
+
id="example_14_2_select"
|
|
839
|
+
multiple
|
|
840
|
+
data-simple-placeholder="Search in dropdown"
|
|
841
|
+
>
|
|
842
|
+
<option value="Item 1">Item 1</option>
|
|
843
|
+
<option value="Item 2">Item 2</option>
|
|
844
|
+
<option value="Item 3">Item 3</option>
|
|
845
|
+
<option value="Item 4">Item 4</option>
|
|
846
|
+
<option value="Item 5">Item 5</option>
|
|
847
|
+
<option value="Item 6">Item 6</option>
|
|
848
|
+
</select>
|
|
849
|
+
<script>
|
|
850
|
+
window.addEventListener('load', () => {
|
|
851
|
+
new SimpleSelect('#example_14_2_select', {
|
|
852
|
+
isSearchInDropdown: true
|
|
853
|
+
})
|
|
854
|
+
})
|
|
855
|
+
</script>
|
|
856
|
+
</div>
|
|
857
|
+
|
|
858
|
+
<script>
|
|
859
|
+
pasteCode({
|
|
860
|
+
codeId: 'code_14',
|
|
861
|
+
firstId: 'example_14_1',
|
|
862
|
+
secondId: 'example_14_2',
|
|
863
|
+
lineBreakText: 'OR'
|
|
864
|
+
});
|
|
865
|
+
</script>
|
|
866
|
+
</div>
|
|
867
|
+
</div>
|
|
868
|
+
|
|
869
|
+
|
|
870
|
+
|
|
871
|
+
|
|
872
|
+
<div class="container">
|
|
873
|
+
<details>
|
|
874
|
+
<summary class="description">Show checkbox for select</summary>
|
|
875
|
+
<pre class="code"><code class="language-html" id="code_15"></code></pre>
|
|
876
|
+
</details>
|
|
877
|
+
|
|
878
|
+
<div class="items">
|
|
879
|
+
<div class="item_full" id="example_15_1">
|
|
880
|
+
<select
|
|
881
|
+
class="jsSimpSelect"
|
|
882
|
+
data-simple-show-checkbox="true"
|
|
883
|
+
>
|
|
884
|
+
<optgroup label="Группа 1">
|
|
885
|
+
<option value="1">Опция 1.1</option>
|
|
886
|
+
</optgroup>
|
|
887
|
+
<optgroup label="Группа 2">
|
|
888
|
+
<option value="1">Опция 2.1</option>
|
|
889
|
+
<option value="1">Опция 2.2</option>
|
|
890
|
+
</optgroup>
|
|
891
|
+
<optgroup label="Группа 3" disabled>
|
|
892
|
+
<option value="1">Опция 3.1</option>
|
|
893
|
+
<option value="1">Опция 3.2</option>
|
|
894
|
+
<option value="1">Опция 3.3</option>
|
|
895
|
+
</optgroup>
|
|
896
|
+
</select>
|
|
897
|
+
</div>
|
|
898
|
+
|
|
899
|
+
<script>
|
|
900
|
+
pasteCode({
|
|
901
|
+
codeId: 'code_15',
|
|
902
|
+
firstId: 'example_15_1',
|
|
903
|
+
});
|
|
904
|
+
</script>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
907
|
+
|
|
908
|
+
|
|
909
|
+
|
|
910
|
+
<div class="container">
|
|
911
|
+
<details>
|
|
912
|
+
<summary class="description">Add classes for wrapper</summary>
|
|
913
|
+
<pre class="code"><code class="language-html" id="code_16"></code></pre>
|
|
914
|
+
</details>
|
|
915
|
+
|
|
916
|
+
<div class="items">
|
|
917
|
+
<div class="item_full" id="example_16_1">
|
|
918
|
+
<select
|
|
919
|
+
class="jsSimpSelect"
|
|
920
|
+
data-simple-add-classes="custom_class_1 custom_class_2"
|
|
921
|
+
>
|
|
922
|
+
<option value="Item 1">Item 1</option>
|
|
923
|
+
<option value="Item 2">Item 2</option>
|
|
924
|
+
<option value="Item 3">Item 3</option>
|
|
925
|
+
<option value="Item 4">Item 4</option>
|
|
926
|
+
<option value="Item 5">Item 5</option>
|
|
927
|
+
<option value="Item 6">Item 6</option>
|
|
928
|
+
</select>
|
|
929
|
+
</div>
|
|
930
|
+
|
|
931
|
+
<script>
|
|
932
|
+
pasteCode({
|
|
933
|
+
codeId: 'code_16',
|
|
934
|
+
firstId: 'example_16_1',
|
|
935
|
+
});
|
|
936
|
+
</script>
|
|
937
|
+
</div>
|
|
938
|
+
</div>
|
|
939
|
+
|
|
940
|
+
|
|
941
|
+
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
|
|
945
|
+
<div class="container">
|
|
946
|
+
<details>
|
|
947
|
+
<summary class="description">Dropdown always open</summary>
|
|
948
|
+
<pre class="code"><code class="language-html" id="code_18"></code></pre>
|
|
949
|
+
</details>
|
|
950
|
+
|
|
951
|
+
<div class="items">
|
|
952
|
+
<div class="item" id="example_18_1">
|
|
953
|
+
<select
|
|
954
|
+
multiple
|
|
955
|
+
class="jsSimpSelect"
|
|
956
|
+
data-simple-always-open="true"
|
|
957
|
+
data-simple-placeholder="Dropdown always open"
|
|
958
|
+
>
|
|
959
|
+
<option value="Item 1">Item 1</option>
|
|
960
|
+
<option value="Item 2">Item 2</option>
|
|
961
|
+
<option value="Item 3">Item 3</option>
|
|
962
|
+
<option value="Item 4">Item 4</option>
|
|
963
|
+
<option value="Item 5">Item 5</option>
|
|
964
|
+
<option value="Item 6">Item 6</option>
|
|
965
|
+
</select>
|
|
966
|
+
</div>
|
|
967
|
+
|
|
968
|
+
<div class="item" id="example_18_2">
|
|
969
|
+
<select
|
|
970
|
+
multiple
|
|
971
|
+
id="example_18_2_select"
|
|
972
|
+
data-simple-placeholder="Dropdown always open"
|
|
973
|
+
>
|
|
974
|
+
<option value="Item 1">Item 1</option>
|
|
975
|
+
<option value="Item 2">Item 2</option>
|
|
976
|
+
<option value="Item 3">Item 3</option>
|
|
977
|
+
<option value="Item 4">Item 4</option>
|
|
978
|
+
</select>
|
|
979
|
+
<script>
|
|
980
|
+
window.addEventListener('load', () => {
|
|
981
|
+
new SimpleSelect('#example_18_2_select', {
|
|
982
|
+
isAlwaysOpen: true
|
|
983
|
+
})
|
|
984
|
+
})
|
|
985
|
+
</script>
|
|
986
|
+
</div>
|
|
987
|
+
|
|
988
|
+
<script>
|
|
989
|
+
pasteCode({
|
|
990
|
+
codeId: 'code_18',
|
|
991
|
+
firstId: 'example_18_1',
|
|
992
|
+
secondId: 'example_18_2',
|
|
993
|
+
lineBreakText: 'OR'
|
|
994
|
+
});
|
|
995
|
+
</script>
|
|
996
|
+
</div>
|
|
997
|
+
</div>
|
|
998
|
+
|
|
999
|
+
|
|
1000
|
+
<div class="container">
|
|
1001
|
+
<details>
|
|
1002
|
+
<summary class="description">Dropdown always open and remove top (Title, arrow, search) </summary>
|
|
1003
|
+
<pre class="code"><code class="language-html" id="code_19"></code></pre>
|
|
1004
|
+
</details>
|
|
1005
|
+
|
|
1006
|
+
<div class="items">
|
|
1007
|
+
<div class="item" id="example_19_1">
|
|
1008
|
+
<select
|
|
1009
|
+
multiple
|
|
1010
|
+
class="jsSimpSelect"
|
|
1011
|
+
data-simple-always-open="true"
|
|
1012
|
+
data-simple-remove-top="true"
|
|
1013
|
+
>
|
|
1014
|
+
<option value="Item 1">Item 1</option>
|
|
1015
|
+
<option value="Item 2">Item 2</option>
|
|
1016
|
+
<option value="Item 3">Item 3</option>
|
|
1017
|
+
<option value="Item 4">Item 4</option>
|
|
1018
|
+
<option value="Item 5">Item 5</option>
|
|
1019
|
+
<option value="Item 6">Item 6</option>
|
|
1020
|
+
</select>
|
|
1021
|
+
</div>
|
|
1022
|
+
|
|
1023
|
+
<div class="item" id="example_19_2">
|
|
1024
|
+
<select
|
|
1025
|
+
multiple
|
|
1026
|
+
id="example_19_2_select"
|
|
1027
|
+
>
|
|
1028
|
+
<option value="Item 1">Item 1</option>
|
|
1029
|
+
<option value="Item 2">Item 2</option>
|
|
1030
|
+
<option value="Item 3">Item 3</option>
|
|
1031
|
+
<option value="Item 4">Item 4</option>
|
|
1032
|
+
</select>
|
|
1033
|
+
<script>
|
|
1034
|
+
window.addEventListener('load', () => {
|
|
1035
|
+
new SimpleSelect('#example_19_2_select', {
|
|
1036
|
+
isAlwaysOpen: true,
|
|
1037
|
+
isRemoveTop: true
|
|
1038
|
+
})
|
|
1039
|
+
})
|
|
1040
|
+
</script>
|
|
1041
|
+
</div>
|
|
1042
|
+
|
|
1043
|
+
<script>
|
|
1044
|
+
pasteCode({
|
|
1045
|
+
codeId: 'code_19',
|
|
1046
|
+
firstId: 'example_19_1',
|
|
1047
|
+
secondId: 'example_19_2',
|
|
1048
|
+
lineBreakText: 'OR'
|
|
1049
|
+
});
|
|
1050
|
+
</script>
|
|
1051
|
+
</div>
|
|
1052
|
+
</div>
|
|
1053
|
+
|
|
1054
|
+
|
|
1055
|
+
|
|
1056
|
+
<div class="container">
|
|
1057
|
+
<details>
|
|
1058
|
+
<summary class="description">Locale</summary>
|
|
1059
|
+
<pre class="code"><code class="language-html" id="code_20"></code></pre>
|
|
1060
|
+
</details>
|
|
1061
|
+
|
|
1062
|
+
<div class="items">
|
|
1063
|
+
<div class="item" id="example_20">
|
|
1064
|
+
<select
|
|
1065
|
+
multiple
|
|
1066
|
+
id="example_20_select"
|
|
1067
|
+
data-simple-placeholder="locale Ukraine"
|
|
1068
|
+
>
|
|
1069
|
+
<option value="Item 1">Item 1</option>
|
|
1070
|
+
<option value="Item 2">Item 2</option>
|
|
1071
|
+
<option value="Item 3">Item 3</option>
|
|
1072
|
+
<option value="Item 4">Item 4</option>
|
|
1073
|
+
</select>
|
|
1074
|
+
<script>
|
|
1075
|
+
window.addEventListener('load', () => {
|
|
1076
|
+
new SimpleSelect('#example_20_select', {
|
|
1077
|
+
isSearch: true,
|
|
1078
|
+
selectAll: true,
|
|
1079
|
+
resetAll: true,
|
|
1080
|
+
isConfirmInMulti: true,
|
|
1081
|
+
locale: {
|
|
1082
|
+
noSearch: 'Немає збігів для',
|
|
1083
|
+
searchText: 'Пошук',
|
|
1084
|
+
title: 'Виберіть',
|
|
1085
|
+
selected: 'Вибране:',
|
|
1086
|
+
all: 'Все',
|
|
1087
|
+
ok: 'Ok',
|
|
1088
|
+
Cancel: 'Скасувати',
|
|
1089
|
+
selectAll: 'Вибрати все',
|
|
1090
|
+
resetAll: 'Скинути все',
|
|
1091
|
+
}
|
|
1092
|
+
})
|
|
1093
|
+
})
|
|
1094
|
+
</script>
|
|
1095
|
+
</div>
|
|
1096
|
+
<div class="item" id="example_20_1">
|
|
1097
|
+
<select
|
|
1098
|
+
multiple
|
|
1099
|
+
id="example_20_1_select"
|
|
1100
|
+
data-simple-placeholder="locale Russian"
|
|
1101
|
+
>
|
|
1102
|
+
<option value="Item 1">Item 1</option>
|
|
1103
|
+
<option value="Item 2">Item 2</option>
|
|
1104
|
+
<option value="Item 3">Item 3</option>
|
|
1105
|
+
<option value="Item 4">Item 4</option>
|
|
1106
|
+
</select>
|
|
1107
|
+
<script>
|
|
1108
|
+
window.addEventListener('load', () => {
|
|
1109
|
+
new SimpleSelect('#example_20_1_select', {
|
|
1110
|
+
isSearch: true,
|
|
1111
|
+
selectAll: true,
|
|
1112
|
+
resetAll: true,
|
|
1113
|
+
isConfirmInMulti: true,
|
|
1114
|
+
locale: {
|
|
1115
|
+
noSearch: 'Нет совпадений для',
|
|
1116
|
+
searchText: 'Поиск',
|
|
1117
|
+
title: 'Выберите',
|
|
1118
|
+
selected: 'Избранное:',
|
|
1119
|
+
all: 'Все',
|
|
1120
|
+
ok: 'Ok',
|
|
1121
|
+
Cancel: 'Отменить',
|
|
1122
|
+
selectAll: 'Выбрать все',
|
|
1123
|
+
resetAll: 'Сбросить все',
|
|
1124
|
+
}
|
|
1125
|
+
})
|
|
1126
|
+
})
|
|
1127
|
+
</script>
|
|
1128
|
+
</div>
|
|
1129
|
+
|
|
1130
|
+
<script>
|
|
1131
|
+
pasteCode({
|
|
1132
|
+
codeId: 'code_20',
|
|
1133
|
+
firstId: 'example_20',
|
|
1134
|
+
secondId: 'example_20_1',
|
|
1135
|
+
});
|
|
1136
|
+
</script>
|
|
1137
|
+
</div>
|
|
1138
|
+
</div>
|
|
1139
|
+
|
|
1140
|
+
|
|
1141
|
+
|
|
1142
|
+
<div class="container">
|
|
1143
|
+
<details>
|
|
1144
|
+
<summary class="description">list native On Device (default: 'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk')</summary>
|
|
1145
|
+
<pre class="code"><code class="language-html" id="code_21"></code></pre>
|
|
1146
|
+
</details>
|
|
1147
|
+
|
|
1148
|
+
<div class="items">
|
|
1149
|
+
<div class="item" id="example_21_1">
|
|
1150
|
+
<select
|
|
1151
|
+
multiple
|
|
1152
|
+
id="example_21_select"
|
|
1153
|
+
>
|
|
1154
|
+
<option value="Item 1">Item 1</option>
|
|
1155
|
+
<option value="Item 2">Item 2</option>
|
|
1156
|
+
<option value="Item 3">Item 3</option>
|
|
1157
|
+
<option value="Item 4">Item 4</option>
|
|
1158
|
+
</select>
|
|
1159
|
+
<script>
|
|
1160
|
+
window.addEventListener('load', () => {
|
|
1161
|
+
new SimpleSelect('#example_21_select', {
|
|
1162
|
+
nativeOnDevice: []
|
|
1163
|
+
})
|
|
1164
|
+
})
|
|
1165
|
+
</script>
|
|
1166
|
+
</div>
|
|
1167
|
+
|
|
1168
|
+
|
|
1169
|
+
<script>
|
|
1170
|
+
pasteCode({
|
|
1171
|
+
codeId: 'code_21',
|
|
1172
|
+
firstId: 'example_21_1',
|
|
1173
|
+
});
|
|
1174
|
+
</script>
|
|
1175
|
+
</div>
|
|
1176
|
+
</div>
|
|
1177
|
+
|
|
1178
|
+
|
|
1179
|
+
|
|
1180
|
+
<div class="container">
|
|
1181
|
+
<details>
|
|
1182
|
+
<summary class="description">detect Native (return boolean)</summary>
|
|
1183
|
+
<pre class="code"><code class="language-html" id="code_22"></code></pre>
|
|
1184
|
+
</details>
|
|
1185
|
+
|
|
1186
|
+
<div class="items">
|
|
1187
|
+
<div class="item" id="example_22_1">
|
|
1188
|
+
<select
|
|
1189
|
+
multiple
|
|
1190
|
+
id="example_22_select"
|
|
1191
|
+
data-simple-placeholder="Always native"
|
|
1192
|
+
>
|
|
1193
|
+
<option value="Item 1">Item 1</option>
|
|
1194
|
+
<option value="Item 2">Item 2</option>
|
|
1195
|
+
<option value="Item 3">Item 3</option>
|
|
1196
|
+
<option value="Item 4">Item 4</option>
|
|
1197
|
+
</select>
|
|
1198
|
+
<script>
|
|
1199
|
+
window.addEventListener('load', () => {
|
|
1200
|
+
new SimpleSelect('#example_22_select', {
|
|
1201
|
+
detectNative: function () {
|
|
1202
|
+
return true;
|
|
1203
|
+
}
|
|
1204
|
+
})
|
|
1205
|
+
})
|
|
1206
|
+
</script>
|
|
1207
|
+
</div>
|
|
1208
|
+
<div class="item" id="example_22_2">
|
|
1209
|
+
<select
|
|
1210
|
+
multiple
|
|
1211
|
+
id="example_22_2_select"
|
|
1212
|
+
data-simple-placeholder="Never native"
|
|
1213
|
+
>
|
|
1214
|
+
<option value="Item 1">Item 1</option>
|
|
1215
|
+
<option value="Item 2">Item 2</option>
|
|
1216
|
+
<option value="Item 3">Item 3</option>
|
|
1217
|
+
<option value="Item 4">Item 4</option>
|
|
1218
|
+
</select>
|
|
1219
|
+
<script>
|
|
1220
|
+
window.addEventListener('load', () => {
|
|
1221
|
+
new SimpleSelect('#example_22_2_select', {
|
|
1222
|
+
detectNative: function () {
|
|
1223
|
+
return false;
|
|
1224
|
+
}
|
|
1225
|
+
})
|
|
1226
|
+
})
|
|
1227
|
+
</script>
|
|
1228
|
+
</div>
|
|
1229
|
+
|
|
1230
|
+
|
|
1231
|
+
<script>
|
|
1232
|
+
pasteCode({
|
|
1233
|
+
codeId: 'code_22',
|
|
1234
|
+
firstId: 'example_22_1',
|
|
1235
|
+
secondId: 'example_22_2',
|
|
1236
|
+
lineBreakText: 'OR'
|
|
1237
|
+
|
|
1238
|
+
});
|
|
1239
|
+
</script>
|
|
1240
|
+
</div>
|
|
1241
|
+
</div>
|
|
1242
|
+
|
|
1243
|
+
|
|
1244
|
+
|
|
1245
|
+
<div class="container">
|
|
1246
|
+
<details>
|
|
1247
|
+
<summary class="description">Dropdown up</summary>
|
|
1248
|
+
<pre class="code"><code class="language-html" id="code_17"></code></pre>
|
|
1249
|
+
</details>
|
|
1250
|
+
|
|
1251
|
+
<div class="items">
|
|
1252
|
+
<div class="item" id="example_17_1">
|
|
1253
|
+
<select
|
|
1254
|
+
multiple
|
|
1255
|
+
class="jsSimpSelect"
|
|
1256
|
+
data-simple-up="true"
|
|
1257
|
+
data-simple-placeholder="Dropdown up"
|
|
1258
|
+
>
|
|
1259
|
+
<option value="Item 1">Item 1</option>
|
|
1260
|
+
<option value="Item 2">Item 2</option>
|
|
1261
|
+
<option value="Item 3">Item 3</option>
|
|
1262
|
+
<option value="Item 4">Item 4</option>
|
|
1263
|
+
<option value="Item 5">Item 5</option>
|
|
1264
|
+
<option value="Item 6">Item 6</option>
|
|
1265
|
+
</select>
|
|
1266
|
+
</div>
|
|
1267
|
+
<div class="item" id="example_17_2">
|
|
1268
|
+
<select
|
|
1269
|
+
multiple
|
|
1270
|
+
data-simple-placeholder="Dropdown up"
|
|
1271
|
+
id="example_17_2_select"
|
|
1272
|
+
>
|
|
1273
|
+
<option value="Item 1">Item 1</option>
|
|
1274
|
+
<option value="Item 2">Item 2</option>
|
|
1275
|
+
<option value="Item 3">Item 3</option>
|
|
1276
|
+
<option value="Item 4">Item 4</option>
|
|
1277
|
+
<option value="Item 5">Item 5</option>
|
|
1278
|
+
<option value="Item 6">Item 6</option>
|
|
1279
|
+
</select>
|
|
1280
|
+
<script>
|
|
1281
|
+
window.addEventListener('load', () => {
|
|
1282
|
+
new SimpleSelect('#example_17_2_select', {
|
|
1283
|
+
isUp: true
|
|
1284
|
+
})
|
|
1285
|
+
})
|
|
1286
|
+
</script>
|
|
1287
|
+
</div>
|
|
1288
|
+
|
|
1289
|
+
<script>
|
|
1290
|
+
pasteCode({
|
|
1291
|
+
codeId: 'code_17',
|
|
1292
|
+
firstId: 'example_17_1',
|
|
1293
|
+
secondId: 'example_17_2',
|
|
1294
|
+
lineBreakText: 'OR'
|
|
1295
|
+
});
|
|
1296
|
+
</script>
|
|
1297
|
+
</div>
|
|
1298
|
+
</div>
|
|
1299
|
+
|
|
1300
|
+
|
|
1301
|
+
<!--
|
|
1302
|
+
|
|
1303
|
+
<div class="container">
|
|
1304
|
+
<details>
|
|
1305
|
+
<summary class="description">TILE</summary>
|
|
1306
|
+
<pre class="code"><code class="language-html" id="code_"></code></pre>
|
|
1307
|
+
</details>
|
|
1308
|
+
|
|
1309
|
+
<div class="items">
|
|
1310
|
+
<div class="item" id="example_">
|
|
1311
|
+
<select
|
|
1312
|
+
class="jsSimpSelect"
|
|
1313
|
+
multiple
|
|
1314
|
+
>
|
|
1315
|
+
</select>
|
|
1316
|
+
</div>
|
|
1317
|
+
|
|
1318
|
+
<div class="item" id="example_">
|
|
1319
|
+
<select
|
|
1320
|
+
multiple
|
|
1321
|
+
data-simple-placeholder="custom width float"
|
|
1322
|
+
>
|
|
1323
|
+
</select>
|
|
1324
|
+
<script>
|
|
1325
|
+
window.addEventListener('load', () => {
|
|
1326
|
+
// new SimpleSelect('#example_2_2_select', {
|
|
1327
|
+
// floatWidth: 1500
|
|
1328
|
+
// })
|
|
1329
|
+
})
|
|
1330
|
+
</script>
|
|
1331
|
+
</div>
|
|
1332
|
+
|
|
1333
|
+
<script>
|
|
1334
|
+
// pasteCode({
|
|
1335
|
+
// codeId: 'code_2',
|
|
1336
|
+
// firstId: 'example_2_1',
|
|
1337
|
+
// secondId: 'example_2_2',
|
|
1338
|
+
// lineBreakText: 'OR'
|
|
1339
|
+
// });
|
|
1340
|
+
</script>
|
|
1341
|
+
</div>
|
|
1342
|
+
</div>
|
|
1343
|
+
|
|
1344
|
+
-->
|
|
1345
|
+
|
|
1346
|
+
|
|
1347
|
+
<script>
|
|
1348
|
+
new SimpleSelect('.jsSimpSelect')
|
|
1349
|
+
</script>
|
|
1350
|
+
|
|
1351
|
+
|
|
1352
|
+
|
|
1353
|
+
|
|
1354
|
+
</body>
|
|
1355
|
+
</html>
|