selectorjs/index.html at master · fazleyrabby/selectorjs · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectorjs - customer select option</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>

    <h3>Default Select</h3>
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <br>
    <br>
    <span>No script</span>
    <br>
    <br>
    <h3>Default Multi Select</h3>
    <select multiple="true">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <br>
    <br>
    <span>No script</span>
    <br>
    <br>
    <h3>SelectorJs single option - (No placeholder)</h3>
    <select class="selector">
        <option value="1">Lemon</option>
        <option value="2">Mango</option>
        <option value="3">Apple</option>
        <option value="4">Apple1</option>
        <option value="5">Apple2</option>
    </select>
    <br>
    <span>init script function: selector('.selector')</span>
    <br>
    <br>

    <h3>SelectorJs with single option  - (Custom Placeholder)</h3>
    <select class="selector2">
        <option value="1">C++</option>
        <option value="2">Java</option>
        <option value="3">C#</option>
    </select>
    <br>
    <span>init script function: selector('.selector2', { placeholder: 'Select 2' })</span>
    <br>
    <br>


    <h3>SelectorJs with multiple options - (No Placeholder)</h3>
    <select class="selector3" multiple='multiple'>
        <option value="1">PHP</option>
        <option value="2">MYSQL</option>
    </select>
    <br>
    <span>init script function: selector('.selector3')</span>
    <br>
    <br>

    <h3>SelectorJs with multiple options - (Custom Placeholder)</h3>
    <select class="selector4" multiple='multiple'>
        <option value="1">Rust</option>
        <option value="2">Go</option>
        <option value="3">Kotlin</option>
        <option value="4">Scala</option>
    </select>
    <br>
    <span>init script function: selector('.selector4', { placeholder: 'Select 4' })</span>
    <br>
    <br>

    <h3>SelectorJs with ID - (No Placeholder)</h3>
    <select id="custom_select" multiple='multiple'>
        <option value="1">Git</option>
        <option value="2">Linux</option>
    </select>
    <br>
    <span>init script function: selector('#custom_select')</span>
    <br>
    <br>


    <code>Note: Elements should have different class names and they need to initialize separately</code>
    <br>
    <br>
    <br>
    <i>**Same class support and single common initialization will be added later**</></i>

    <br>
    <br>
    <small>Github Repo Link: <a href="https://github.com/fazleyrabby/selectorjs.git" target="_blank">https://github.com/fazleyrabby/selectorjs.git</a></small>

    <script src="selector.js"></script>
    <script>
        selector('.selector');
        selector('.selector2', { placeholder: 'Select 2' });
        selector('.selector3',);
        selector('.selector4', { placeholder: 'Select 4' });
        selector('#custom_select');
    </script>
</body>
</html>