1- <!doctype html>
2- < html >
3- < head >
4- < title > </ title >
5- < script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "> </ script >
6- < script src ="https://raw.github.com/ivaynberg/select2/3.3.2/select2.min.js "> </ script >
7- <!-- <link rel="stylesheet" type="text/css" href="https://raw.github.com/ivaynberg/select2/3.3.2/select2.css"/> -->
8- < link rel ="stylesheet " type ="text/css " href ="css/select2.css "/>
9- < link href ="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css " rel ="stylesheet ">
10- < link rel ="stylesheet " type ="text/css " href ="select2-bootstrap.css "/>
11- </ head >
12- < body style ="margin:20px; ">
13- < form class ="form-horizontal ">
14- < div class ="control-group ">
15- < label for ="default " class ="control-label "> Default textbox</ label >
16- < div class ="controls ">
17- < input id ="default " type ="text " style ="width:400px; "/>
18- </ div >
19- </ div >
20-
21- < div class ="control-group ">
22- < label for ="single " class ="control-label "> Select2 single select</ label >
23- < div class ="controls ">
24- < select id ="single " class ="select2 " style ="width:400px; ">
25- < option > </ option >
26- < option value ="A "> A</ option >
27- < option value ="B "> B</ option >
28- < option value ="C "> C</ option >
29- </ select >
30- </ div >
31- </ div >
32-
33- < div class ="control-group ">
34- < label for ="multiple " class ="control-label "> Select2 multi select</ label >
35- < div class ="controls ">
36- < select id ="multiple " class ="select2 " multiple ="multiple " style ="width:400px; ">
37- < option > </ option >
38- < option value ="A "> A</ option >
39- < option value ="B "> B</ option >
40- < option value ="C "> C</ option >
41- </ select >
42- </ div >
43- </ div >
44-
45- < div class ="control-group ">
46- < label for ="single-append " class ="control-label "> Select2 append</ label >
47- < div class ="controls ">
48- < div class ="input-append ">
49- < select id ="single-append " class ="select2 " style ="width:400px; ">
50- < option > </ option >
51- < option value ="A "> A</ option >
52- < option value ="B "> B</ option >
53- < option value ="C "> C</ option >
54- </ select >
55- < button class ="btn " type ="button " data-select2-open ="single-append ">
56- < i class ="icon-search "> </ i >
57- </ button >
58- </ div >
59- </ div >
60- </ div >
61-
62- < div class ="control-group ">
63- < label for ="single-prepend " class ="control-label "> Select2 prepend</ label >
64- < div class ="controls ">
65- < div class ="input-prepend ">
66- < button class ="btn " type ="button " data-select2-open ="single-prepend ">
67- < i class ="icon-search "> </ i >
68- </ button >
69- < select id ="single-prepend " class ="select2 " style ="width:400px; ">
70- < option > </ option >
71- < option value ="A "> A</ option >
72- < option value ="B "> B</ option >
73- < option value ="C "> C</ option >
74- </ select >
75- </ div >
76- </ div >
77- </ div >
78-
79- < div class ="control-group ">
80- < label for ="multi-append " class ="control-label "> Select2 multi append</ label >
81- < div class ="controls ">
82- < div class ="input-append ">
83- < select id ="multi-append " class ="select2 " multiple ="multiple " style ="width:400px; ">
84- < option > </ option >
85- < option value ="A "> A</ option >
86- < option value ="B "> B</ option >
87- < option value ="C "> C</ option >
88- </ select >
89- < button class ="btn " type ="button " data-select2-open ="multi-append ">
90- < i class ="icon-search "> </ i >
91- </ button >
92- </ div >
93- </ div >
94- </ div >
95-
96- < div class ="control-group ">
97- < label for ="multi-prepend " class ="control-label "> Select2 multi prepend</ label >
98- < div class ="controls ">
99- < div class ="input-prepend ">
100- < button class ="btn " type ="button " data-select2-open ="multi-prepend ">
101- < i class ="icon-search "> </ i >
102- </ button >
103- < select id ="multi-prepend " class ="select2 " multiple ="multiple " style ="width:400px; ">
104- < option > </ option >
105- < option value ="A "> A</ option >
106- < option value ="B "> B</ option >
107- < option value ="C "> C</ option >
108- </ select >
109- </ div >
110- </ div >
111- </ div >
112-
113- < div class ="control-group ">
114- < label for ="remote-load " class ="control-label "> Select2 custom data load</ label >
115- < div class ="controls ">
116- < div class ="input-prepend input-append ">
117- < button class ="btn " type ="button " data-select2-open ="remote-load ">
118- < i class ="icon-search "> </ i >
119- </ button >
120- < input id ="remote-load " type ="hidden " class ="select2-remote " style ="width:400px; ">
121- < button class ="btn " type ="button " data-select2-open ="remote-load ">
122- < i class ="icon-search "> </ i >
123- </ button >
124- </ div >
125- </ div >
126- </ div >
127- </ form >
128-
129- < script >
130- $ ( '.select2' ) . select2 ( { placeholder : '' } ) ;
131-
132- $ ( '.select2-remote' ) . select2 ( { data : [ { id :'A' , text :'A' } ] } ) ;
133-
134- $ ( 'button[data-select2-open]' ) . click ( function ( ) {
135- $ ( '#' + $ ( this ) . data ( 'select2-open' ) ) . select2 ( 'open' ) ;
136- } ) ;
137- </ script >
138- </ body >
1+ <!doctype html>
2+ < html >
3+ < head >
4+ < title > </ title >
5+ < script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "> </ script >
6+ < script src ="http://ivaynberg.github.io/select2/select2-{{ page.version }}/select2.js "> </ script >
7+ < link rel ="stylesheet " type ="text/css " href ="http://ivaynberg.github.io/select2/select2-{{ page.version }}/select2.css "/>
8+ < link href ="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css " rel ="stylesheet ">
9+ < link rel ="stylesheet " type ="text/css " href ="select2-bootstrap.css "/>
10+ </ head >
11+ < body style ="margin:20px; ">
12+ < h1 > Select2 version {{ page.version }}</ h1 >
13+
14+ < ul class ="nav nav-tabs ">
15+ {% for version in site.versions %}
16+ < li class ="{% if version == page.version %}active{% endif %} "> < a href ="{{ version }}.html "> {{ version }}</ a > </ li >
17+ {% endfor %}
18+ </ ul >
19+ < hr >
20+ < form class ="form-horizontal ">
21+ < div class ="control-group ">
22+ < label for ="default " class ="control-label "> Default textbox</ label >
23+ < div class ="controls ">
24+ < input id ="default " type ="text " style ="width:400px; "/>
25+ </ div >
26+ </ div >
27+
28+ < div class ="control-group ">
29+ < label for ="single " class ="control-label "> Select2 single select</ label >
30+ < div class ="controls ">
31+ < select id ="single " class ="select2 " style ="width:400px; ">
32+ < option > </ option >
33+ < option value ="A "> A</ option >
34+ < option value ="B "> B</ option >
35+ < option value ="C "> C</ option >
36+ </ select >
37+ </ div >
38+ </ div >
39+
40+ < div class ="control-group ">
41+ < label for ="multiple " class ="control-label "> Select2 multi select</ label >
42+ < div class ="controls ">
43+ < select id ="multiple " class ="select2 " multiple ="multiple " style ="width:400px; ">
44+ < option > </ option >
45+ < option value ="A "> A</ option >
46+ < option value ="B "> B</ option >
47+ < option value ="C "> C</ option >
48+ </ select >
49+ </ div >
50+ </ div >
51+
52+ < div class ="control-group ">
53+ < label for ="single-append " class ="control-label "> Select2 append</ label >
54+ < div class ="controls ">
55+ < div class ="input-append ">
56+ < select id ="single-append " class ="select2 " style ="width:400px; ">
57+ < option > </ option >
58+ < option value ="A "> A</ option >
59+ < option value ="B "> B</ option >
60+ < option value ="C "> C</ option >
61+ </ select >
62+ < button class ="btn " type ="button " data-select2-open ="single-append ">
63+ < i class ="icon-search "> </ i >
64+ </ button >
65+ </ div >
66+ </ div >
67+ </ div >
68+
69+ < div class ="control-group ">
70+ < label for ="single-prepend " class ="control-label "> Select2 prepend</ label >
71+ < div class ="controls ">
72+ < div class ="input-prepend ">
73+ < button class ="btn " type ="button " data-select2-open ="single-prepend ">
74+ < i class ="icon-search "> </ i >
75+ </ button >
76+ < select id ="single-prepend " class ="select2 " style ="width:400px; ">
77+ < option > </ option >
78+ < option value ="A "> A</ option >
79+ < option value ="B "> B</ option >
80+ < option value ="C "> C</ option >
81+ </ select >
82+ </ div >
83+ </ div >
84+ </ div >
85+
86+ < div class ="control-group ">
87+ < label for ="multi-append " class ="control-label "> Select2 multi append</ label >
88+ < div class ="controls ">
89+ < div class ="input-append ">
90+ < select id ="multi-append " class ="select2 " multiple ="multiple " style ="width:400px; ">
91+ < option > </ option >
92+ < option value ="A "> A</ option >
93+ < option value ="B "> B</ option >
94+ < option value ="C "> C</ option >
95+ </ select >
96+ < button class ="btn " type ="button " data-select2-open ="multi-append ">
97+ < i class ="icon-search "> </ i >
98+ </ button >
99+ </ div >
100+ </ div >
101+ </ div >
102+
103+ < div class ="control-group ">
104+ < label for ="multi-prepend " class ="control-label "> Select2 multi prepend</ label >
105+ < div class ="controls ">
106+ < div class ="input-prepend ">
107+ < button class ="btn " type ="button " data-select2-open ="multi-prepend ">
108+ < i class ="icon-search "> </ i >
109+ </ button >
110+ < select id ="multi-prepend " class ="select2 " multiple ="multiple " style ="width:400px; ">
111+ < option > </ option >
112+ < option value ="A "> A</ option >
113+ < option value ="B "> B</ option >
114+ < option value ="C "> C</ option >
115+ </ select >
116+ </ div >
117+ </ div >
118+ </ div >
119+
120+ < div class ="control-group ">
121+ < label for ="remote-load " class ="control-label "> Select2 custom data load</ label >
122+ < div class ="controls ">
123+ < div class ="input-prepend input-append ">
124+ < button class ="btn " type ="button " data-select2-open ="remote-load ">
125+ < i class ="icon-search "> </ i >
126+ </ button >
127+ < input id ="remote-load " type ="hidden " class ="select2-remote " style ="width:400px; ">
128+ < button class ="btn " type ="button " data-select2-open ="remote-load ">
129+ < i class ="icon-search "> </ i >
130+ </ button >
131+ </ div >
132+ </ div >
133+ </ div >
134+ </ form >
135+
136+ < script >
137+ $ ( '.select2' ) . select2 ( { placeholder : '' } ) ;
138+
139+ $ ( '.select2-remote' ) . select2 ( { data : [ { id :'A' , text :'A' } ] } ) ;
140+
141+ $ ( 'button[data-select2-open]' ) . click ( function ( ) {
142+ $ ( '#' + $ ( this ) . data ( 'select2-open' ) ) . select2 ( 'open' ) ;
143+ } ) ;
144+ </ script >
145+ </ body >
139146</ html >
0 commit comments