1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4  <title>Selectbox demo</title>
5  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
6  <link rel="stylesheet" type="text/css" href="selectbox.css" media="all" />
7 </head>
8 <body>
9  <div>
10   <h5><a href="http://debugger.ru/projects/browserextensions/dom/selectbox">BrowserExtensions/DOM/Selectbox demo</a></h5>
11   <form>
12    <table colspan="0" rowspan="0" border="0">
13     <tr>
14      <td class="leftcol">
15       <select id="left" multiple="multiple" >
16        <option value="1" selected="selected">St Petersburg</option>
17        <option value="2">Moscow</option>
18        <option value="142">Arkhangelsk</option>
19        <option value="143">Astrakhan</option>
20        <option value="144">Belgorod</option>
21        <option value="145">Blagoveschensk</option>
22        <option value="146">Bratsk</option>
23        <option value="147">Bryansk</option>
24
25        <option value="148">Cheboksary</option>
26        <option value="149">Chelyabinsk</option>
27        <option value="150">Chita</option>
28        <option value="151">Ekaterinburg</option>
29        <option value="152">Elista</option>
30        <option value="153">Gelendzhik</option>
31
32        <option value="154">Irkutsk</option>
33        <option value="155">Izhevsk</option>
34        <option value="156">Kaliningrad</option>
35        <option value="157">Kaluga</option>
36        <option value="158">Kazan</option>
37        <option value="159">Khabarovsk</option>
38
39        <option value="160">Kirov</option>
40        <option value="161">Kislovodsk</option>
41        <option value="162">Kostroma</option>
42        <option value="163">Krasnodar</option>
43        <option value="164">Krasnoyarsk</option>
44        <option value="165">Kursk</option>
45
46        <option value="166">Magadan</option>
47        <option value="167">Magnitogorsk</option>
48        <option value="168">Murmansk</option>
49        <option value="169">Naberezhnye chelny</option>
50        <option value="170">Nakhodka</option>
51        <option value="171">Nalchik</option>
52
53        <option value="172">Nizhny novgorod</option>
54        <option value="173">Novosibirsk</option>
55        <option value="174">Omsk</option>
56        <option value="175">Orel</option>
57        <option value="176">Orenburg</option>
58        <option value="177">Penza</option>
59
60       </select>
61      </td>
62      <td class="movers">
63       <input id="rtla"  type="button" class="mover" value=">>"  />
64       <input id="rtl"  type="button" class="mover" value=">"  />
65       <input id="ltr"  type="button" class="mover" value="<"  />
66       <input id="ltra"  type="button" class="mover" value="<<"  />
67       <label for="autosoft">Sort:<input id="autosort" type="checkbox" /></label>
68      </td>
69      <td class="rightcol">
70       <select id="right" multiple="multiple" >
71        <option value="178">Perm</option>
72        <option value="179">Petropavlovsk-kamchatsky</option>
73        <option value="180">Petrozavodsk</option>
74        <option value="181">Pskov</option>
75        <option value="182">Pyatigorsk</option>
76        <option value="183">Rostov-on-don</option>
77
78        <option value="184">Ryazan</option>
79        <option value="185">Samara</option>
80        <option value="186">Saratov</option>
81        <option value="187">Smolensk</option>
82        <option value="188">Sochi</option>
83        <option value="189">Stavropol</option>
84
85        <option value="190">Suzdal</option>
86        <option value="191">Tobolsk</option>
87        <option value="192">Togliatti</option>
88        <option value="193">Tuapse</option>
89        <option value="194">Tula</option>
90        <option value="195">Tver</option>
91
92        <option value="196">Tyumen</option>
93        <option value="197">Ufa</option>
94        <option value="198">Ulan-ude</option>
95        <option value="199">Ulyanovsk</option>
96        <option value="200">Veliky novgorod</option>
97        <option value="201">Vladimir</option>
98
99        <option value="202">Vladivostok</option>
100        <option value="203">Volgograd</option>
101        <option value="204">Vologda</option>
102        <option value="205">Voronezh</option>
103        <option value="206">Vyborg</option>
104        <option value="207">Yakutsk</option>
105
106        <option value="208">Yaroslavl</option>
107        <option value="209">Yoshkar-ola</option>
108        <option value="210">Yuzhno-sakhalinsk</option>
109        <option value="447">Salekhard</option>
110        <option value="12384">Tomsk</option>
111        <option value="12385">Tambov</option>
112       </select>
113      </td>
114     </tr>
115     <tr>
116      <td class="leftcol">
117       <input name="left_hide" id="left_hide" type="text" />
118       <input id="bleft_hide" type="button" class="button" value="Hide matching options"  />
119       <input name="left_hideOnly" id="left_hideOnly" type="text"  />
120       <input id="bleft_hideOnly" type="button" class="button" value="Hide only matching options"  />
121       <input name="left_select" id="left_select" type="text" />
122       <input id="bleft_select" type="button" class="button" value="Select matching options" />
123       <input name="left_selectOnly" id="left_selectOnly" type="text" />
124       <input id="bleft_selectOnly" type="button" class="button" value="Select only matching options"  />
125      </td>
126      <td></td>
127      <td class="rightcol">
128       <input name="right_hide" id="right_hide" type="text" />
129       <input id="bright_hide" type="button" class="button" value="Hide matching options"  />
130       <input name="right_hideOnly" id="right_hideOnly" type="text" />
131       <input id="bright_hideOnly" type="button" class="button" value="Hide only matching options"  />
132       <input name="right_select" id="right_select" type="text" />
133       <input id="bright_select" type="button" class="button" value="Select matching options"  />
134       <input name="right_selectOnly" id="right_selectOnly" type="text" />
135       <input id="bright_selectOnly" type="button" class="button" value="Select only matching options"  />
136      </td>
137     </tr>
138     <tr>
139      <td align="center" colspan="3">
140      Left-to-Right move:
141      <textarea id="move_ltr" ></textarea>
142      Right-to-Left move:
143      <textarea id="move_rtl" ></textarea>
144      </td>
145     </tr>
146    </table>
147   </form>
148   <script src="../helpers.js" type="text/javascript"></script>
149   <script src="../objectextensions.js" type="text/javascript"></script>
150   <script src="../arrayextensions.js" type="text/javascript"></script>
151   <script src="../regexpextensions.js" type="text/javascript"></script>
152   <script src="../dom/selectbox.js" type="text/javascript"></script>
153   <script type="text/javascript">
154    var s_left = new Selectbox('left');
155    var s_right = new Selectbox('right');
156
157    document.getElementById('rtla').onclick = function () {s_left.moveAllOptions(s_right, null, this.form.autosort.checked);
158                                                           this.form.move_ltr.value = s_left.getOptionsTrack('deleted','text',', ');
159                                                          }
160    document.getElementById('rtl').onclick = function () {s_left.moveSelectedOptions(s_right, null, this.form.autosort.checked);
161                                                          this.form.move_ltr.value = s_left.getOptionsTrack('deleted','text',', ')
162                                                         }
163    document.getElementById('ltr').onclick = function () {s_right.moveSelectedOptions(s_left, null, this.form.autosort.checked);
164                                                          this.form.move_rtl.value = s_right.getOptionsTrack('deleted','text',', ')
165                                                         }
166    document.getElementById('ltra').onclick = function () {s_right.moveAllOptions(s_left, null, this.form.autosort.checked);
167                                                           this.form.move_rtl.value = s_right.getOptionsTrack('deleted','text',', ');
168                                                          }
169
170    /*
171    *  add some filters for left side
172    */
173    document.getElementById('bleft_hide').onclick =
174    document.getElementById('bleft_hideOnly').onclick = function () {
175      var show = this.value.indexOf("Show")===0;
176      var fn = (show?"show":"hide")+this.id.replace(/.+?(only)?$/i, "$1")+'MatchingOptions';
177      var inp = this.id.replace(/^\w/, "");
178      s_left[fn](this.form[inp].value);
179
180      this.value = show?this.value.replace("Show","Hide"):this.value.replace("Hide","Show");
181    }
182    document.getElementById('bleft_select').onclick =
183    document.getElementById('bleft_selectOnly').onclick = function () {
184      var select = this.value.indexOf("Select")===0;
185      var fn = (select?"":"un")+this.id.replace(/[^_]+_/, "")+'MatchingOptions';
186      var inp = this.id.replace(/^\w/, "");
187      s_left[fn](this.form[inp].value);
188
189      this.value = select?this.value.replace("Select","Deselect"):this.value.replace("Deselect","Select");
190    }
191    /*
192    *  add some filters for right side
193    */
194    document.getElementById('bright_hide').onclick =
195    document.getElementById('bright_hideOnly').onclick = function () {
196      var show = this.value.indexOf("Show")===0;
197      var fn = (show?"show":"hide")+this.id.replace(/.+?(only)?$/i, "$1")+'MatchingOptions';
198      var inp = this.id.replace(/^\w/, "");
199      s_right[fn](this.form[inp].value);
200
201      this.value = show?this.value.replace("Show","Hide"):this.value.replace("Hide","Show");
202    }
203    document.getElementById('bright_select').onclick =
204    document.getElementById('bright_selectOnly').onclick = function () {
205      var select = this.value.indexOf("Select")===0;
206      var fn = (select?"":"un")+this.id.replace(/[^_]+_/, "")+'MatchingOptions';
207      var inp = this.id.replace(/^\w/, "");
208      s_right[fn](this.form[inp].value);
209
210      this.value = select?this.value.replace("Select","Deselect"):this.value.replace("Deselect","Select");
211    }
212   </script>
213  </div>
214 </body>
215</html>