Selectoption/Example.htm at master · taranglute/Selectoption · 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Selectoptions.js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="dist/SelectElement.js"></script>
    <script type="text/javascript">
        $(function () {
            /*Example 1*/
            $("select.selectsingle").Selectoptions({ data: [2] })
            /*Example 2*/
            $("select.selectmultiple").Selectoptions({ data: [1, 2] });
            /*Example 3*/
            $("select.selectmultiplejson").Selectoptions({ comparewith: "label", datasource: "json", data: [{ label: "1", Caption: "One" }, { label: "3", Caption: "Three"}] })
        });
    </script>
</head>
<body class="container" style="padding-top: 15px;">
    <h2>Selectoptions.js</h2>
    <div class="panel panel-default">
        <div class="panel-heading">
            Single Value</div>
        <div class="panel-body">
            <div class="form-group" style="margin-bottom: 0px;">
                <select class="form-control selectsingle">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">4</option>
                </select>
                For example, <code>$("select.selectsingle").Selectoptions({data:[2]})</code>.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            Javascript Array</div>
        <div class="panel-body">
            <div class="form-group" style="margin-bottom: 0px;">
                <select class="form-control selectmultiple" multiple="multiple">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">4</option>
                </select>
                For example, <code>$("select.selectmultiple").Selectoptions({data:[1,2]})</code>.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            Json datasource</div>
        <div class="panel-body">
            <div class="form-group" style="margin-bottom: 0px;">
                <select class="form-control selectmultiplejson" multiple="multiple">
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                For example, <code>$("select.selectmultiplejson").Selectoptions({comparewith: "label",datasource:"json",data:[{label:"1",Caption:"One"},{label:"3",Caption:"Three"}]})</code>.
            </div>
        </div>
    </div>
</body>
</html>