forked from rmm5t/jquery-flexselect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
224 lines (222 loc) · 12.2 KB
/
test.html
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>flexselect tests</title>
<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<style>
input { width: 400px; }
label, input { display: block; }
label { font-weight: bold; }
input, .flexselect_dropdown li { font-size: 1em; }
small { color: #999; }
.flexselect_selected small { color: #ddd; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select.special-flexselect").flexselect({ hideDropdownOnEmptyInput: true });
$("select.flexselect").flexselect();
$("input:text:enabled:first").focus();
$("form").submit(function() {
alert($(this).serialize());
return false;
});
});
</script>
</head>
<body>
<form>
<label>Pick a Top 100 University or College in North America: <em>(Start typing...)</em></label>
<select class="special-flexselect" id="school" name="school" tabindex="1" data-placeholder="Start typing a school name...">
<option value=""></option>
<option value="1">Massachusetts Institute of Technology</option>
<option value="2">Harvard University</option>
<option value="3">University of California, Berkeley</Option>
<option value="4">University of Michigan</option>
<option value="5">University of Illinois at Urbana-Champaign</option>
<option value="6">Purdue University</option>
<option value="7">University of Wisconsin-Madison</option>
<option value="8">Yale University</option>
<option value="9">Indiana University - System</option>
<option value="10">University of California System</option>
<option value="11">Stanford University</option>
<option value="12">Penn State University</option>
<option value="13">The University of Texas at Austin</option>
<option value="14">University of Washington</option>
<option value="15">University of Pennsylvania</option>
<option value="16">Cornell University</option>
<option value="17">Columbia University in the City of New York</option>
<option value="18">University of California, Los Angeles</option>
<option value="19">University of Minnesota</option>
<option value="20">New York University</option>
<option value="21">University of Florida</option>
<option value="22">University of Virginia</option>
<option value="23">Carnegie Mellon University</option>
<option value="24">Rutgers University - New Brunswick</option>
<option value="25">University of Toronto</option>
<option value="26">University of Maryland</option>
<option value="27">The Ohio State University</option>
<option value="28">Virginia Polytechnic Institute and State University</option>
<option value="29">University of Arizona</option>
<option value="30">University of Southern California</option>
<option value="31">Texas A&M University</option>
<option value="32">Princeton University</option>
<option value="33">University of North Carolina at Chapel Hill</option>
<option value="34">Duke University</option>
<option value="35">North Carolina State University</option>
<option value="36">Michigan State University</option>
<option value="37">University of California, San Diego</option>
<option value="38">University of Chicago</option>
<option value="39">The University of British Columbia</option>
<option value="40">University of California, Irvine</option>
<option value="41">University of California, Davis</option>
<option value="42">Johns Hopkins University</option>
<option value="43">Arizona State University</option>
<option value="44">University of Georgia</option>
<option value="45">Boston University</option>
<option value="46">University of Colorado at Boulder</option>
<option value="47">University of Waterloo</option>
<option value="48">Northwestern University</option>
<option value="49">University of Pittsburgh</option>
<option value="50">York University</option>
<option value="51">Iowa State University of Science and Technology</option>
<option value="52">Georgia Institute of Technology</option>
<option value="53">University of Iowa</option>
<option value="54">McGill University</option>
<option value="55">University of California, Santa Barbara</option>
<option value="56">University of Alberta</option>
<option value="57">University of Oregon</option>
<option value="58">University of Delaware</option>
<option value="59">Université Laval</option>
<option value="60">California Institute of Technology</option>
<option value="61">Oregon State University</option>
<option value="62">University of California, Riverside</option>
<option value="63">University of Illinois at Chicago</option>
<option value="64">University of Nebraska - Lincoln</option>
<option value="65">Drexel University</option>
<option value="66">Simon Fraser University</option>
<option value="67">Rice University</option>
<option value="68">Washington University in St. Louis</option>
<option value="69">Virginia Commonwealth University</option>
<option value="70">Stony Brook University, State University of New York</option>
<option value="71">Brown University</option>
<option value="72">San Diego State University</option>
<option value="73">Georgetown University</option>
<option value="74">Université de Montréal</option>
<option value="75">University of Rochester</option>
<option value="76">Dartmouth College</option>
<option value="77">University of Calgary</option>
<option value="78">University of Victoria</option>
<option value="79">Carleton University</option>
<option value="80">Vanderbilt University</option>
<option value="81">Emory University</option>
<option value="82">University of Notre Dame</option>
<option value="83">Université du Québec à Montréal</option>
<option value="84">The University of Western Ontario</option>
<option value="85">University of California, Santa Cruz</option>
<option value="86">University of California, San Francisco</option>
<option value="87">Auburn University</option>
<option value="88">McMaster University</option>
<option value="89">University of Wisconsin-Milwaukee</option>
<option value="90">Portland State University</option>
<option value="91">Queen's University</option>
<option value="92">University of Guelph</option>
<option value="93">SUNY at Binghamton</option>
<option value="94">Utah State University</option>
<option value="95">The University of Texas at Arlington</option>
<option value="96">Illinois Institute of Technology</option>
<option value="97">Concordia University</option>
<option value="98">Indiana University - Purdue University Indianapolis</option>
<option value="99">California State University, Sacramento</option>
<option value="100">New Jersey Institute of Technology</option>
</select>
<p>From: <a href="http://www.4icu.org/topNorth-America/">Top 100 Universities And Colleges in North America</a></p>
<label style="margin: 75px 0 0 400px;">Pick a US President: <em>(Start typing...)</em></label>
<select id="president" class="flexselect" name="president" tabindex="2" style="font-size: 1.5em; 10px; margin: 10px 0 0 400px;">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">James Madison</option>
<option value="5">James Monroe</option>
<option value="6">John Quincy Adams</option>
<option value="7">Andrew Jackson</option>
<option value="8">Martin Van Buren</option>
<option value="9">William Henry Harrison</option>
<option value="10">John Tyler</option>
<option value="11">James Knox Polk</option>
<option value="12">Zachary Taylor</option>
<option value="13">Millard Fillmore</option>
<option value="14">Franklin Pierce</option>
<option value="15">James Buchanan</option>
<option value="16">Abraham Lincoln</option>
<option value="17">Andrew Johnson</option>
<option value="18">Ulysses S. Grant</option>
<option value="19">Rutherford B. Hayes</option>
<option value="20">James Garfield</option>
<option value="21">Chester Arthur</option>
<option value="22">Grover Cleveland</option>
<option value="23">Benjamin Harrison</option>
<option value="24">Grover Cleveland</option>
<option value="25">William McKinley</option>
<option value="26">Theodore Roosevelt</option>
<option value="27">William Howard Taft</option>
<option value="28">Woodrow Wilson</option>
<option value="29">Warren Harding</option>
<option value="30">Calvin Coolidge</option>
<option value="31">Herbert Hoover</option>
<option value="32">Franklin D. Roosevelt</option>
<option value="33">Harry S Truman</option>
<option value="34">Dwight D. Eisenhower</option>
<option value="35">John F. Kennedy</option>
<option value="36">Lyndon Johnson</option>
<option value="37">Richard Nixon</option>
<option value="38">Gerald Ford</option>
<option value="39">James Carter</option>
<option value="40">Ronald Reagan</option>
<option value="41">George H. W. Bush</option>
<option value="42">William J. Clinton</option>
<option value="43">George W. Bush</option>
<option value="44">Barack H. Obama</option>
</select>
<div style="position:absolute; top:300px; left:100px; z-index:100; text-align:left;">
<div style="position:relative; background-color:#ccc; padding:10px;">
<div style="width:500px; height:100px;">
<select id="animal" name="animal" class="flexselect" tabindex="3" onchange="alert('You changed the animal to ' + $(this).val());">
<option value="angelfish">angelfish</option>
<option value="buffalo">buffalo</option>
<option value="canary">canary</option>
<option value="dinosaur">dinosaur</option>
<option value="eel">eel</option>
<option value="fox">fox</option>
<option value="goldfish">goldfish</option>
<option value="hippo">hippo</option>
<option value="iguana">iguana</option>
<option value="jellyfish">jellyfish</option>
<option value="kangaroo">kangaroo</option>
<option value="llama">llama</option>
<option value="moose">moose</option>
<option value="narwhal">narwhal</option>
<option value="ostrich">ostrich</option>
<option value="pelican">pelican</option>
<option value="quail">quail</option>
<option value="raccoon">raccoon</option>
<option value="snail">snail</option>
<option value="toucan">toucan</option>
<option value="unicorn">unicorn</option>
<option value="vulture">vulture</option>
<option value="wildebeest">wildebeest</option>
<option value="xenopus">xenopus</option>
<option value="yak">yak</option>
<option value="zebra">zebra</option>
</select>
<p>This is an absolute positioned div with an onchange handler on the original select element.</p>
</div>
</div>
</div>
<input type="submit" value="Go" style="margin: 250px auto 0;" tabindex="4"/>
<form>
</body>
</html>