3.4.5.html 61 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663
  1. <!doctype html>
  2. <html class="demo">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>select2-bootstrap-css</title>
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. <link rel="stylesheet" href="//select2.github.io/select2/select2-3.4.5/select2.css">
  9. <link rel="stylesheet" href="css/select2-bootstrap.css">
  10. <link rel="stylesheet" href="css/gh-pages.css">
  11. <!--[if lt IE 9]>
  12. <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  13. <script src="js/respond.min.js"></script>
  14. <![endif]-->
  15. </head>
  16. <body>
  17. <header class="navbar navbar-default navbar-fixed-top" role="navigation">
  18. <div class="navbar-header">
  19. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
  20. <span class="sr-only">Toggle navigation</span>
  21. <span class="icon-bar"></span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. </button>
  25. <a class="navbar-brand" href="index.html">select2-bootstrap-css</a>
  26. </div>
  27. <div class="collapse navbar-collapse bs-navbar-collapse">
  28. <ul class="nav navbar-nav">
  29. <li class="">
  30. <a href="3.3.2.html">3.3.2</a>
  31. </li>
  32. <li class="">
  33. <a href="3.4.1.html">3.4.1</a>
  34. </li>
  35. <li class="">
  36. <a href="3.4.2.html">3.4.2</a>
  37. </li>
  38. <li class="">
  39. <a href="3.4.3.html">3.4.3</a>
  40. </li>
  41. <li class="">
  42. <a href="3.4.4.html">3.4.4</a>
  43. </li>
  44. <li class="active">
  45. <a href="3.4.5.html">3.4.5</a>
  46. </li>
  47. <li class="">
  48. <a href="3.5.1.html">3.5.1</a>
  49. </li>
  50. <li class="">
  51. <a href="3.5.2.html">3.5.2</a>
  52. </li>
  53. <li class="">
  54. <a href="master.html">master</a>
  55. </li>
  56. </ul>
  57. </div>
  58. </header>
  59. <div class="form-group">
  60. <label for="default" class="control-label">Default textbox</label>
  61. <input id="default" type="text" class="form-control" placeholder="Placeholder text">
  62. </div>
  63. <div class="form-group">
  64. <label for="single" class="control-label">Select2 single select</label>
  65. <select id="single" class="form-control select2">
  66. <option></option>
  67. <optgroup label="Alaskan/Hawaiian Time Zone">
  68. <option value="AK">Alaska</option>
  69. <option value="HI">Hawaii</option>
  70. </optgroup>
  71. <optgroup label="Pacific Time Zone">
  72. <option value="CA">California</option>
  73. <option value="NV">Nevada</option>
  74. <option value="OR">Oregon</option>
  75. <option value="WA">Washington</option>
  76. </optgroup>
  77. <optgroup label="Mountain Time Zone">
  78. <option value="AZ">Arizona</option>
  79. <option value="CO">Colorado</option>
  80. <option value="ID">Idaho</option>
  81. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  82. <option value="NM">New Mexico</option>
  83. <option value="ND">North Dakota</option>
  84. <option value="UT">Utah</option>
  85. <option value="WY">Wyoming</option>
  86. </optgroup>
  87. <optgroup label="Central Time Zone">
  88. <option value="AL">Alabama</option>
  89. <option value="AR">Arkansas</option>
  90. <option value="IL">Illinois</option>
  91. <option value="IA">Iowa</option>
  92. <option value="KS">Kansas</option>
  93. <option value="KY">Kentucky</option>
  94. <option value="LA">Louisiana</option>
  95. <option value="MN">Minnesota</option>
  96. <option value="MS">Mississippi</option>
  97. <option value="MO">Missouri</option>
  98. <option value="OK">Oklahoma</option>
  99. <option value="SD">South Dakota</option>
  100. <option value="TX">Texas</option>
  101. <option value="TN">Tennessee</option>
  102. <option value="WI">Wisconsin</option>
  103. </optgroup>
  104. <optgroup label="Eastern Time Zone">
  105. <option value="CT">Connecticut</option>
  106. <option value="DE">Delaware</option>
  107. <option value="FL">Florida</option>
  108. <option value="GA">Georgia</option>
  109. <option value="IN">Indiana</option>
  110. <option value="ME">Maine</option>
  111. <option value="MD">Maryland</option>
  112. <option value="MA">Massachusetts</option>
  113. <option value="MI">Michigan</option>
  114. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  115. <option value="NY">New York</option>
  116. <option value="NC">North Carolina</option>
  117. <option value="OH">Ohio</option>
  118. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  119. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  120. <option value="WV">West Virginia</option>
  121. </optgroup>
  122. </select>
  123. </div>
  124. <div class="form-group">
  125. <label for="multiple" class="control-label">Select2 multi select</label>
  126. <select id="multiple" class="form-control select2-multiple" multiple>
  127. <optgroup label="Alaskan/Hawaiian Time Zone">
  128. <option value="AK">Alaska</option>
  129. <option value="HI">Hawaii</option>
  130. </optgroup>
  131. <optgroup label="Pacific Time Zone">
  132. <option value="CA">California</option>
  133. <option value="NV">Nevada</option>
  134. <option value="OR">Oregon</option>
  135. <option value="WA">Washington</option>
  136. </optgroup>
  137. <optgroup label="Mountain Time Zone">
  138. <option value="AZ">Arizona</option>
  139. <option value="CO">Colorado</option>
  140. <option value="ID">Idaho</option>
  141. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  142. <option value="NM">New Mexico</option>
  143. <option value="ND">North Dakota</option>
  144. <option value="UT">Utah</option>
  145. <option value="WY">Wyoming</option>
  146. </optgroup>
  147. <optgroup label="Central Time Zone">
  148. <option value="AL">Alabama</option>
  149. <option value="AR">Arkansas</option>
  150. <option value="IL">Illinois</option>
  151. <option value="IA">Iowa</option>
  152. <option value="KS">Kansas</option>
  153. <option value="KY">Kentucky</option>
  154. <option value="LA">Louisiana</option>
  155. <option value="MN">Minnesota</option>
  156. <option value="MS">Mississippi</option>
  157. <option value="MO">Missouri</option>
  158. <option value="OK">Oklahoma</option>
  159. <option value="SD">South Dakota</option>
  160. <option value="TX">Texas</option>
  161. <option value="TN">Tennessee</option>
  162. <option value="WI">Wisconsin</option>
  163. </optgroup>
  164. <optgroup label="Eastern Time Zone">
  165. <option value="CT">Connecticut</option>
  166. <option value="DE">Delaware</option>
  167. <option value="FL">Florida</option>
  168. <option value="GA">Georgia</option>
  169. <option value="IN">Indiana</option>
  170. <option value="ME">Maine</option>
  171. <option value="MD">Maryland</option>
  172. <option value="MA">Massachusetts</option>
  173. <option value="MI">Michigan</option>
  174. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  175. <option value="NY">New York</option>
  176. <option value="NC">North Carolina</option>
  177. <option value="OH">Ohio</option>
  178. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  179. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  180. <option value="WV">West Virginia</option>
  181. </optgroup>
  182. </select>
  183. </div>
  184. <div class="page-header">
  185. <h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups" ><span class="glyphicon glyphicon-link"></span></a></small></h3>
  186. </div>
  187. <p>To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add <code>.select2-bootstrap-prepend</code> and/or <code>.select2-bootstrap-append</code> to the <code>.input-group</code> wrapper element to address the corresponding border-radii.</p>
  188. <div class="form-group">
  189. <label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
  190. <div class="input-group select2-bootstrap-prepend">
  191. <span class="input-group-addon">
  192. <input type="checkbox" checked>
  193. </span>
  194. <select id="select2-single-append" class="form-control select2-allow-clear">
  195. <option></option>
  196. <optgroup label="Alaskan/Hawaiian Time Zone">
  197. <option value="AK">Alaska</option>
  198. <option value="HI">Hawaii</option>
  199. </optgroup>
  200. <optgroup label="Pacific Time Zone">
  201. <option value="CA">California</option>
  202. <option value="NV">Nevada</option>
  203. <option value="OR">Oregon</option>
  204. <option value="WA">Washington</option>
  205. </optgroup>
  206. <optgroup label="Mountain Time Zone">
  207. <option value="AZ">Arizona</option>
  208. <option value="CO">Colorado</option>
  209. <option value="ID">Idaho</option>
  210. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  211. <option value="NM">New Mexico</option>
  212. <option value="ND">North Dakota</option>
  213. <option value="UT">Utah</option>
  214. <option value="WY">Wyoming</option>
  215. </optgroup>
  216. <optgroup label="Central Time Zone">
  217. <option value="AL">Alabama</option>
  218. <option value="AR">Arkansas</option>
  219. <option value="IL">Illinois</option>
  220. <option value="IA">Iowa</option>
  221. <option value="KS">Kansas</option>
  222. <option value="KY">Kentucky</option>
  223. <option value="LA">Louisiana</option>
  224. <option value="MN">Minnesota</option>
  225. <option value="MS">Mississippi</option>
  226. <option value="MO">Missouri</option>
  227. <option value="OK">Oklahoma</option>
  228. <option value="SD">South Dakota</option>
  229. <option value="TX">Texas</option>
  230. <option value="TN">Tennessee</option>
  231. <option value="WI">Wisconsin</option>
  232. </optgroup>
  233. <optgroup label="Eastern Time Zone">
  234. <option value="CT">Connecticut</option>
  235. <option value="DE">Delaware</option>
  236. <option value="FL">Florida</option>
  237. <option value="GA">Georgia</option>
  238. <option value="IN">Indiana</option>
  239. <option value="ME">Maine</option>
  240. <option value="MD">Maryland</option>
  241. <option value="MA">Massachusetts</option>
  242. <option value="MI">Michigan</option>
  243. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  244. <option value="NY">New York</option>
  245. <option value="NC">North Carolina</option>
  246. <option value="OH">Ohio</option>
  247. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  248. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  249. <option value="WV">West Virginia</option>
  250. </optgroup>
  251. </select>
  252. </div>
  253. </div>
  254. <div class="form-group">
  255. <label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
  256. <div class="input-group select2-bootstrap-prepend">
  257. <span class="input-group-addon">
  258. <input type="radio">
  259. </span>
  260. <select id="single-append-radio" class="form-control select2-allow-clear" multiple>
  261. <option></option>
  262. <optgroup label="Alaskan/Hawaiian Time Zone">
  263. <option value="AK">Alaska</option>
  264. <option value="HI">Hawaii</option>
  265. </optgroup>
  266. <optgroup label="Pacific Time Zone">
  267. <option value="CA">California</option>
  268. <option value="NV">Nevada</option>
  269. <option value="OR">Oregon</option>
  270. <option value="WA">Washington</option>
  271. </optgroup>
  272. <optgroup label="Mountain Time Zone">
  273. <option value="AZ">Arizona</option>
  274. <option value="CO">Colorado</option>
  275. <option value="ID">Idaho</option>
  276. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  277. <option value="NM">New Mexico</option>
  278. <option value="ND">North Dakota</option>
  279. <option value="UT">Utah</option>
  280. <option value="WY">Wyoming</option>
  281. </optgroup>
  282. <optgroup label="Central Time Zone">
  283. <option value="AL">Alabama</option>
  284. <option value="AR">Arkansas</option>
  285. <option value="IL">Illinois</option>
  286. <option value="IA">Iowa</option>
  287. <option value="KS">Kansas</option>
  288. <option value="KY">Kentucky</option>
  289. <option value="LA">Louisiana</option>
  290. <option value="MN">Minnesota</option>
  291. <option value="MS">Mississippi</option>
  292. <option value="MO">Missouri</option>
  293. <option value="OK">Oklahoma</option>
  294. <option value="SD">South Dakota</option>
  295. <option value="TX">Texas</option>
  296. <option value="TN">Tennessee</option>
  297. <option value="WI">Wisconsin</option>
  298. </optgroup>
  299. <optgroup label="Eastern Time Zone">
  300. <option value="CT">Connecticut</option>
  301. <option value="DE">Delaware</option>
  302. <option value="FL">Florida</option>
  303. <option value="GA">Georgia</option>
  304. <option value="IN">Indiana</option>
  305. <option value="ME">Maine</option>
  306. <option value="MD">Maryland</option>
  307. <option value="MA">Massachusetts</option>
  308. <option value="MI">Michigan</option>
  309. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  310. <option value="NY">New York</option>
  311. <option value="NC">North Carolina</option>
  312. <option value="OH">Ohio</option>
  313. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  314. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  315. <option value="WV">West Virginia</option>
  316. </optgroup>
  317. </select>
  318. </div>
  319. </div>
  320. <div class="form-group">
  321. <label for="single-append-text" class="control-label">Select2 append</label>
  322. <div class="input-group select2-bootstrap-append">
  323. <select id="single-append-text" class="form-control select2-allow-clear">
  324. <option></option>
  325. <optgroup label="Alaskan/Hawaiian Time Zone">
  326. <option value="AK">Alaska</option>
  327. <option value="HI">Hawaii</option>
  328. </optgroup>
  329. <optgroup label="Pacific Time Zone">
  330. <option value="CA">California</option>
  331. <option value="NV">Nevada</option>
  332. <option value="OR">Oregon</option>
  333. <option value="WA">Washington</option>
  334. </optgroup>
  335. <optgroup label="Mountain Time Zone">
  336. <option value="AZ">Arizona</option>
  337. <option value="CO">Colorado</option>
  338. <option value="ID">Idaho</option>
  339. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  340. <option value="NM">New Mexico</option>
  341. <option value="ND">North Dakota</option>
  342. <option value="UT">Utah</option>
  343. <option value="WY">Wyoming</option>
  344. </optgroup>
  345. <optgroup label="Central Time Zone">
  346. <option value="AL">Alabama</option>
  347. <option value="AR">Arkansas</option>
  348. <option value="IL">Illinois</option>
  349. <option value="IA">Iowa</option>
  350. <option value="KS">Kansas</option>
  351. <option value="KY">Kentucky</option>
  352. <option value="LA">Louisiana</option>
  353. <option value="MN">Minnesota</option>
  354. <option value="MS">Mississippi</option>
  355. <option value="MO">Missouri</option>
  356. <option value="OK">Oklahoma</option>
  357. <option value="SD">South Dakota</option>
  358. <option value="TX">Texas</option>
  359. <option value="TN">Tennessee</option>
  360. <option value="WI">Wisconsin</option>
  361. </optgroup>
  362. <optgroup label="Eastern Time Zone">
  363. <option value="CT">Connecticut</option>
  364. <option value="DE">Delaware</option>
  365. <option value="FL">Florida</option>
  366. <option value="GA">Georgia</option>
  367. <option value="IN">Indiana</option>
  368. <option value="ME">Maine</option>
  369. <option value="MD">Maryland</option>
  370. <option value="MA">Massachusetts</option>
  371. <option value="MI">Michigan</option>
  372. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  373. <option value="NY">New York</option>
  374. <option value="NC">North Carolina</option>
  375. <option value="OH">Ohio</option>
  376. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  377. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  378. <option value="WV">West Virginia</option>
  379. </optgroup>
  380. </select>
  381. <span class="input-group-btn">
  382. <button class="btn btn-default" type="button" data-select2-open="single-append-text">
  383. <span class="glyphicon glyphicon-search"></span>
  384. </button>
  385. </span>
  386. </div>
  387. </div>
  388. <div class="form-group">
  389. <label for="single-prepend-text" class="control-label">Select2 prepend</label>
  390. <div class="input-group select2-bootstrap-prepend">
  391. <span class="input-group-btn">
  392. <button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
  393. <span class="glyphicon glyphicon-search"></span>
  394. </button>
  395. </span>
  396. <select id="single-prepend-text" class="form-control select2">
  397. <option></option>
  398. <option value="A">A</option>
  399. <option value="B">B</option>
  400. <option value="C">C</option>
  401. </select>
  402. </div>
  403. </div>
  404. <div class="form-group">
  405. <label for="multi-append" class="control-label">Select2 multi append</label>
  406. <div class="input-group select2-bootstrap-append">
  407. <select id="multi-append" class="form-control select2" multiple>
  408. <option></option>
  409. <option value="A">A</option>
  410. <option value="B">B</option>
  411. <option value="C">C</option>
  412. </select>
  413. <span class="input-group-btn">
  414. <button class="btn btn-default" type="button" data-select2-open="multi-append">
  415. <span class="glyphicon glyphicon-search"></span>
  416. </button>
  417. </span>
  418. </div>
  419. </div>
  420. <div class="form-group">
  421. <label for="multi-prepend" class="control-label">Select2 multi prepend</label>
  422. <div class="input-group select2-bootstrap-prepend">
  423. <span class="input-group-btn">
  424. <button class="btn btn-default" type="button" data-select2-open="multi-prepend">
  425. State
  426. </button>
  427. </span>
  428. <select id="multi-prepend" class="form-control select2" multiple>
  429. <option></option>
  430. <optgroup label="Alaskan/Hawaiian Time Zone">
  431. <option value="AK">Alaska</option>
  432. <option value="HI">Hawaii</option>
  433. </optgroup>
  434. <optgroup label="Pacific Time Zone">
  435. <option value="CA">California</option>
  436. <option value="NV">Nevada</option>
  437. <option value="OR">Oregon</option>
  438. <option value="WA">Washington</option>
  439. </optgroup>
  440. <optgroup label="Mountain Time Zone">
  441. <option value="AZ">Arizona</option>
  442. <option value="CO">Colorado</option>
  443. <option value="ID">Idaho</option>
  444. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  445. <option value="NM">New Mexico</option>
  446. <option value="ND">North Dakota</option>
  447. <option value="UT">Utah</option>
  448. <option value="WY">Wyoming</option>
  449. </optgroup>
  450. <optgroup label="Central Time Zone">
  451. <option value="AL">Alabama</option>
  452. <option value="AR">Arkansas</option>
  453. <option value="IL">Illinois</option>
  454. <option value="IA">Iowa</option>
  455. <option value="KS">Kansas</option>
  456. <option value="KY">Kentucky</option>
  457. <option value="LA">Louisiana</option>
  458. <option value="MN">Minnesota</option>
  459. <option value="MS">Mississippi</option>
  460. <option value="MO">Missouri</option>
  461. <option value="OK">Oklahoma</option>
  462. <option value="SD">South Dakota</option>
  463. <option value="TX">Texas</option>
  464. <option value="TN">Tennessee</option>
  465. <option value="WI">Wisconsin</option>
  466. </optgroup>
  467. <optgroup label="Eastern Time Zone">
  468. <option value="CT">Connecticut</option>
  469. <option value="DE">Delaware</option>
  470. <option value="FL">Florida</option>
  471. <option value="GA">Georgia</option>
  472. <option value="IN">Indiana</option>
  473. <option value="ME">Maine</option>
  474. <option value="MD">Maryland</option>
  475. <option value="MA">Massachusetts</option>
  476. <option value="MI">Michigan</option>
  477. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  478. <option value="NY">New York</option>
  479. <option value="NC">North Carolina</option>
  480. <option value="OH">Ohio</option>
  481. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  482. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  483. <option value="WV">West Virginia</option>
  484. </optgroup>
  485. </select>
  486. </div>
  487. </div>
  488. <div class="container">
  489. <div class="page-header">
  490. <h3>
  491. Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-sizes"><span class="glyphicon glyphicon-link"></span></a></small>
  492. </h3>
  493. </div>
  494. <div class="row">
  495. <div class="col-md-4">
  496. <label for="select2-multiple-input-sm" class="control-label">col-md-4</label>
  497. <select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple" multiple>
  498. <optgroup label="Alaskan/Hawaiian Time Zone">
  499. <option value="AK">Alaska</option>
  500. <option value="HI">Hawaii</option>
  501. </optgroup>
  502. <optgroup label="Pacific Time Zone">
  503. <option value="CA">California</option>
  504. <option value="NV">Nevada</option>
  505. <option value="OR">Oregon</option>
  506. <option value="WA">Washington</option>
  507. </optgroup>
  508. <optgroup label="Mountain Time Zone">
  509. <option value="AZ">Arizona</option>
  510. <option value="CO">Colorado</option>
  511. <option value="ID">Idaho</option>
  512. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  513. <option value="NM">New Mexico</option>
  514. <option value="ND">North Dakota</option>
  515. <option value="UT">Utah</option>
  516. <option value="WY">Wyoming</option>
  517. </optgroup>
  518. <optgroup label="Central Time Zone">
  519. <option value="AL">Alabama</option>
  520. <option value="AR">Arkansas</option>
  521. <option value="IL">Illinois</option>
  522. <option value="IA">Iowa</option>
  523. <option value="KS">Kansas</option>
  524. <option value="KY">Kentucky</option>
  525. <option value="LA">Louisiana</option>
  526. <option value="MN">Minnesota</option>
  527. <option value="MS">Mississippi</option>
  528. <option value="MO">Missouri</option>
  529. <option value="OK">Oklahoma</option>
  530. <option value="SD">South Dakota</option>
  531. <option value="TX">Texas</option>
  532. <option value="TN">Tennessee</option>
  533. <option value="WI">Wisconsin</option>
  534. </optgroup>
  535. <optgroup label="Eastern Time Zone">
  536. <option value="CT">Connecticut</option>
  537. <option value="DE">Delaware</option>
  538. <option value="FL">Florida</option>
  539. <option value="GA">Georgia</option>
  540. <option value="IN">Indiana</option>
  541. <option value="ME">Maine</option>
  542. <option value="MD">Maryland</option>
  543. <option value="MA">Massachusetts</option>
  544. <option value="MI">Michigan</option>
  545. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  546. <option value="NY">New York</option>
  547. <option value="NC">North Carolina</option>
  548. <option value="OH">Ohio</option>
  549. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  550. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  551. <option value="WV">West Virginia</option>
  552. </optgroup>
  553. </select>
  554. </div>
  555. <div class="col-md-3">
  556. <label for="select2-single-input-sm" class="control-label">col-md-3</label>
  557. <select id="select2-single-input-sm" class="form-control input-sm select2-multiple">
  558. <optgroup label="Alaskan/Hawaiian Time Zone">
  559. <option value="AK">Alaska</option>
  560. <option value="HI">Hawaii</option>
  561. </optgroup>
  562. <optgroup label="Pacific Time Zone">
  563. <option value="CA">California</option>
  564. <option value="NV">Nevada</option>
  565. <option value="OR">Oregon</option>
  566. <option value="WA">Washington</option>
  567. </optgroup>
  568. <optgroup label="Mountain Time Zone">
  569. <option value="AZ">Arizona</option>
  570. <option value="CO">Colorado</option>
  571. <option value="ID">Idaho</option>
  572. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  573. <option value="NM">New Mexico</option>
  574. <option value="ND">North Dakota</option>
  575. <option value="UT">Utah</option>
  576. <option value="WY">Wyoming</option>
  577. </optgroup>
  578. <optgroup label="Central Time Zone">
  579. <option value="AL">Alabama</option>
  580. <option value="AR">Arkansas</option>
  581. <option value="IL">Illinois</option>
  582. <option value="IA">Iowa</option>
  583. <option value="KS">Kansas</option>
  584. <option value="KY">Kentucky</option>
  585. <option value="LA">Louisiana</option>
  586. <option value="MN">Minnesota</option>
  587. <option value="MS">Mississippi</option>
  588. <option value="MO">Missouri</option>
  589. <option value="OK">Oklahoma</option>
  590. <option value="SD">South Dakota</option>
  591. <option value="TX">Texas</option>
  592. <option value="TN">Tennessee</option>
  593. <option value="WI">Wisconsin</option>
  594. </optgroup>
  595. <optgroup label="Eastern Time Zone">
  596. <option value="CT">Connecticut</option>
  597. <option value="DE">Delaware</option>
  598. <option value="FL">Florida</option>
  599. <option value="GA">Georgia</option>
  600. <option value="IN">Indiana</option>
  601. <option value="ME">Maine</option>
  602. <option value="MD">Maryland</option>
  603. <option value="MA">Massachusetts</option>
  604. <option value="MI">Michigan</option>
  605. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  606. <option value="NY">New York</option>
  607. <option value="NC">North Carolina</option>
  608. <option value="OH">Ohio</option>
  609. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  610. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  611. <option value="WV">West Virginia</option>
  612. </optgroup>
  613. </select>
  614. </div>
  615. <div class="col-md-2">
  616. <label for="bootstrap-input-sm" class="control-label">Bootstrap input</label>
  617. <input id="bootstrap-input-sm" class="form-control input-sm" placeholder=".input-sm">
  618. </div>
  619. <div class="col-md-3">
  620. <div class="form-group has-success">
  621. <label for="select2-single-input-group-sm" class="control-label">col-md-3</label>
  622. <div class="input-group input-group-sm select2-bootstrap-prepend">
  623. <span class="input-group-addon">
  624. <input type="radio">
  625. </span>
  626. <select id="select2-single-input-group-sm" class="form-control select2">
  627. <option></option>
  628. <optgroup label="Alaskan/Hawaiian Time Zone">
  629. <option value="AK">Alaska</option>
  630. <option value="HI">Hawaii</option>
  631. </optgroup>
  632. <optgroup label="Pacific Time Zone">
  633. <option value="CA">California</option>
  634. <option value="NV">Nevada</option>
  635. <option value="OR">Oregon</option>
  636. <option value="WA">Washington</option>
  637. </optgroup>
  638. <optgroup label="Mountain Time Zone">
  639. <option value="AZ">Arizona</option>
  640. <option value="CO">Colorado</option>
  641. <option value="ID">Idaho</option>
  642. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  643. <option value="NM">New Mexico</option>
  644. <option value="ND">North Dakota</option>
  645. <option value="UT">Utah</option>
  646. <option value="WY">Wyoming</option>
  647. </optgroup>
  648. <optgroup label="Central Time Zone">
  649. <option value="AL">Alabama</option>
  650. <option value="AR">Arkansas</option>
  651. <option value="IL">Illinois</option>
  652. <option value="IA">Iowa</option>
  653. <option value="KS">Kansas</option>
  654. <option value="KY">Kentucky</option>
  655. <option value="LA">Louisiana</option>
  656. <option value="MN">Minnesota</option>
  657. <option value="MS">Mississippi</option>
  658. <option value="MO">Missouri</option>
  659. <option value="OK">Oklahoma</option>
  660. <option value="SD">South Dakota</option>
  661. <option value="TX">Texas</option>
  662. <option value="TN">Tennessee</option>
  663. <option value="WI">Wisconsin</option>
  664. </optgroup>
  665. <optgroup label="Eastern Time Zone">
  666. <option value="CT">Connecticut</option>
  667. <option value="DE">Delaware</option>
  668. <option value="FL">Florida</option>
  669. <option value="GA">Georgia</option>
  670. <option value="IN">Indiana</option>
  671. <option value="ME">Maine</option>
  672. <option value="MD">Maryland</option>
  673. <option value="MA">Massachusetts</option>
  674. <option value="MI">Michigan</option>
  675. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  676. <option value="NY">New York</option>
  677. <option value="NC">North Carolina</option>
  678. <option value="OH">Ohio</option>
  679. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  680. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  681. <option value="WV">West Virginia</option>
  682. </optgroup>
  683. </select>
  684. </div>
  685. </div>
  686. </div>
  687. </div>
  688. <hr>
  689. <div class="row">
  690. <div class="col-md-4 has-warning">
  691. <label for="select2-multiple" class="control-label">col-md-4</label>
  692. <select id="select2-multiple" class="form-control select2-multiple" multiple>
  693. <optgroup label="Alaskan/Hawaiian Time Zone">
  694. <option value="AK">Alaska</option>
  695. <option value="HI">Hawaii</option>
  696. </optgroup>
  697. <optgroup label="Pacific Time Zone">
  698. <option value="CA">California</option>
  699. <option value="NV">Nevada</option>
  700. <option value="OR">Oregon</option>
  701. <option value="WA">Washington</option>
  702. </optgroup>
  703. <optgroup label="Mountain Time Zone">
  704. <option value="AZ">Arizona</option>
  705. <option value="CO">Colorado</option>
  706. <option value="ID">Idaho</option>
  707. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  708. <option value="NM">New Mexico</option>
  709. <option value="ND">North Dakota</option>
  710. <option value="UT">Utah</option>
  711. <option value="WY">Wyoming</option>
  712. </optgroup>
  713. <optgroup label="Central Time Zone">
  714. <option value="AL">Alabama</option>
  715. <option value="AR">Arkansas</option>
  716. <option value="IL">Illinois</option>
  717. <option value="IA">Iowa</option>
  718. <option value="KS">Kansas</option>
  719. <option value="KY">Kentucky</option>
  720. <option value="LA">Louisiana</option>
  721. <option value="MN">Minnesota</option>
  722. <option value="MS">Mississippi</option>
  723. <option value="MO">Missouri</option>
  724. <option value="OK">Oklahoma</option>
  725. <option value="SD">South Dakota</option>
  726. <option value="TX">Texas</option>
  727. <option value="TN">Tennessee</option>
  728. <option value="WI">Wisconsin</option>
  729. </optgroup>
  730. <optgroup label="Eastern Time Zone">
  731. <option value="CT">Connecticut</option>
  732. <option value="DE">Delaware</option>
  733. <option value="FL">Florida</option>
  734. <option value="GA">Georgia</option>
  735. <option value="IN">Indiana</option>
  736. <option value="ME">Maine</option>
  737. <option value="MD">Maryland</option>
  738. <option value="MA">Massachusetts</option>
  739. <option value="MI">Michigan</option>
  740. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  741. <option value="NY">New York</option>
  742. <option value="NC">North Carolina</option>
  743. <option value="OH">Ohio</option>
  744. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  745. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  746. <option value="WV">West Virginia</option>
  747. </optgroup>
  748. </select>
  749. <p class="help-block">Example block-level help text here.</p>
  750. </div>
  751. <div class="col-md-3">
  752. <label for="span_small" class="control-label">col-md-3</label>
  753. <select id="span_small" class="form-control select2">
  754. <optgroup label="Alaskan/Hawaiian Time Zone">
  755. <option value="AK">Alaska</option>
  756. <option value="HI">Hawaii</option>
  757. </optgroup>
  758. <optgroup label="Pacific Time Zone">
  759. <option value="CA">California</option>
  760. <option value="NV">Nevada</option>
  761. <option value="OR">Oregon</option>
  762. <option value="WA">Washington</option>
  763. </optgroup>
  764. <optgroup label="Mountain Time Zone">
  765. <option value="AZ">Arizona</option>
  766. <option value="CO">Colorado</option>
  767. <option value="ID">Idaho</option>
  768. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  769. <option value="NM">New Mexico</option>
  770. <option value="ND">North Dakota</option>
  771. <option value="UT">Utah</option>
  772. <option value="WY">Wyoming</option>
  773. </optgroup>
  774. <optgroup label="Central Time Zone">
  775. <option value="AL">Alabama</option>
  776. <option value="AR">Arkansas</option>
  777. <option value="IL">Illinois</option>
  778. <option value="IA">Iowa</option>
  779. <option value="KS">Kansas</option>
  780. <option value="KY">Kentucky</option>
  781. <option value="LA">Louisiana</option>
  782. <option value="MN">Minnesota</option>
  783. <option value="MS">Mississippi</option>
  784. <option value="MO">Missouri</option>
  785. <option value="OK">Oklahoma</option>
  786. <option value="SD">South Dakota</option>
  787. <option value="TX">Texas</option>
  788. <option value="TN">Tennessee</option>
  789. <option value="WI">Wisconsin</option>
  790. </optgroup>
  791. <optgroup label="Eastern Time Zone">
  792. <option value="CT">Connecticut</option>
  793. <option value="DE">Delaware</option>
  794. <option value="FL">Florida</option>
  795. <option value="GA">Georgia</option>
  796. <option value="IN">Indiana</option>
  797. <option value="ME">Maine</option>
  798. <option value="MD">Maryland</option>
  799. <option value="MA">Massachusetts</option>
  800. <option value="MI">Michigan</option>
  801. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  802. <option value="NY">New York</option>
  803. <option value="NC">North Carolina</option>
  804. <option value="OH">Ohio</option>
  805. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  806. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  807. <option value="WV">West Virginia</option>
  808. </optgroup>
  809. </select>
  810. </div>
  811. <div class="col-md-2">
  812. <label for="span-medium">Bootstrap input</label>
  813. <input id="span-medium" class="form-control" placeholder=".col-md-2">
  814. </div>
  815. <div class="col-md-3">
  816. <div class="form-group">
  817. <label for="span_large" class="control-label">col-md-3</label>
  818. <div class="input-group select2-bootstrap-prepend">
  819. <span class="input-group-addon">
  820. <input type="checkbox" checked>
  821. </span>
  822. <select id="span_large" class="form-control select2">
  823. <option></option>
  824. <optgroup label="Alaskan/Hawaiian Time Zone">
  825. <option value="AK">Alaska</option>
  826. <option value="HI">Hawaii</option>
  827. </optgroup>
  828. <optgroup label="Pacific Time Zone">
  829. <option value="CA">California</option>
  830. <option value="NV">Nevada</option>
  831. <option value="OR">Oregon</option>
  832. <option value="WA">Washington</option>
  833. </optgroup>
  834. <optgroup label="Mountain Time Zone">
  835. <option value="AZ">Arizona</option>
  836. <option value="CO">Colorado</option>
  837. <option value="ID">Idaho</option>
  838. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  839. <option value="NM">New Mexico</option>
  840. <option value="ND">North Dakota</option>
  841. <option value="UT">Utah</option>
  842. <option value="WY">Wyoming</option>
  843. </optgroup>
  844. <optgroup label="Central Time Zone">
  845. <option value="AL">Alabama</option>
  846. <option value="AR">Arkansas</option>
  847. <option value="IL">Illinois</option>
  848. <option value="IA">Iowa</option>
  849. <option value="KS">Kansas</option>
  850. <option value="KY">Kentucky</option>
  851. <option value="LA">Louisiana</option>
  852. <option value="MN">Minnesota</option>
  853. <option value="MS">Mississippi</option>
  854. <option value="MO">Missouri</option>
  855. <option value="OK">Oklahoma</option>
  856. <option value="SD">South Dakota</option>
  857. <option value="TX">Texas</option>
  858. <option value="TN">Tennessee</option>
  859. <option value="WI">Wisconsin</option>
  860. </optgroup>
  861. <optgroup label="Eastern Time Zone">
  862. <option value="CT">Connecticut</option>
  863. <option value="DE">Delaware</option>
  864. <option value="FL">Florida</option>
  865. <option value="GA">Georgia</option>
  866. <option value="IN">Indiana</option>
  867. <option value="ME">Maine</option>
  868. <option value="MD">Maryland</option>
  869. <option value="MA">Massachusetts</option>
  870. <option value="MI">Michigan</option>
  871. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  872. <option value="NY">New York</option>
  873. <option value="NC">North Carolina</option>
  874. <option value="OH">Ohio</option>
  875. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  876. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  877. <option value="WV">West Virginia</option>
  878. </optgroup>
  879. </select>
  880. </div>
  881. </div>
  882. </div>
  883. </div>
  884. <hr>
  885. <div class="row">
  886. <div class="col-md-4">
  887. <label for="select2-multiple-input-lg" class="control-label">col-md-4</label>
  888. <select id="select2-multiple-input-lg" class="form-control input-lg select2-multiple" multiple>
  889. <optgroup label="Alaskan/Hawaiian Time Zone">
  890. <option value="AK">Alaska</option>
  891. <option value="HI">Hawaii</option>
  892. </optgroup>
  893. <optgroup label="Pacific Time Zone">
  894. <option value="CA">California</option>
  895. <option value="NV">Nevada</option>
  896. <option value="OR">Oregon</option>
  897. <option value="WA">Washington</option>
  898. </optgroup>
  899. <optgroup label="Mountain Time Zone">
  900. <option value="AZ">Arizona</option>
  901. <option value="CO">Colorado</option>
  902. <option value="ID">Idaho</option>
  903. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  904. <option value="NM">New Mexico</option>
  905. <option value="ND">North Dakota</option>
  906. <option value="UT">Utah</option>
  907. <option value="WY">Wyoming</option>
  908. </optgroup>
  909. <optgroup label="Central Time Zone">
  910. <option value="AL">Alabama</option>
  911. <option value="AR">Arkansas</option>
  912. <option value="IL">Illinois</option>
  913. <option value="IA">Iowa</option>
  914. <option value="KS">Kansas</option>
  915. <option value="KY">Kentucky</option>
  916. <option value="LA">Louisiana</option>
  917. <option value="MN">Minnesota</option>
  918. <option value="MS">Mississippi</option>
  919. <option value="MO">Missouri</option>
  920. <option value="OK">Oklahoma</option>
  921. <option value="SD">South Dakota</option>
  922. <option value="TX">Texas</option>
  923. <option value="TN">Tennessee</option>
  924. <option value="WI">Wisconsin</option>
  925. </optgroup>
  926. <optgroup label="Eastern Time Zone">
  927. <option value="CT">Connecticut</option>
  928. <option value="DE">Delaware</option>
  929. <option value="FL">Florida</option>
  930. <option value="GA">Georgia</option>
  931. <option value="IN">Indiana</option>
  932. <option value="ME">Maine</option>
  933. <option value="MD">Maryland</option>
  934. <option value="MA">Massachusetts</option>
  935. <option value="MI">Michigan</option>
  936. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  937. <option value="NY">New York</option>
  938. <option value="NC">North Carolina</option>
  939. <option value="OH">Ohio</option>
  940. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  941. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  942. <option value="WV">West Virginia</option>
  943. </optgroup>
  944. </select>
  945. </div>
  946. <div class="col-md-3">
  947. <label for="span-small" class="control-label">col-md-3</label>
  948. <select id="span-small" class="form-control input-lg select2-multiple">
  949. <optgroup label="Alaskan/Hawaiian Time Zone">
  950. <option value="AK">Alaska</option>
  951. <option value="HI">Hawaii</option>
  952. </optgroup>
  953. <optgroup label="Pacific Time Zone">
  954. <option value="CA">California</option>
  955. <option value="NV">Nevada</option>
  956. <option value="OR">Oregon</option>
  957. <option value="WA">Washington</option>
  958. </optgroup>
  959. <optgroup label="Mountain Time Zone">
  960. <option value="AZ">Arizona</option>
  961. <option value="CO">Colorado</option>
  962. <option value="ID">Idaho</option>
  963. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  964. <option value="NM">New Mexico</option>
  965. <option value="ND">North Dakota</option>
  966. <option value="UT">Utah</option>
  967. <option value="WY">Wyoming</option>
  968. </optgroup>
  969. <optgroup label="Central Time Zone">
  970. <option value="AL">Alabama</option>
  971. <option value="AR">Arkansas</option>
  972. <option value="IL">Illinois</option>
  973. <option value="IA">Iowa</option>
  974. <option value="KS">Kansas</option>
  975. <option value="KY">Kentucky</option>
  976. <option value="LA">Louisiana</option>
  977. <option value="MN">Minnesota</option>
  978. <option value="MS">Mississippi</option>
  979. <option value="MO">Missouri</option>
  980. <option value="OK">Oklahoma</option>
  981. <option value="SD">South Dakota</option>
  982. <option value="TX">Texas</option>
  983. <option value="TN">Tennessee</option>
  984. <option value="WI">Wisconsin</option>
  985. </optgroup>
  986. <optgroup label="Eastern Time Zone">
  987. <option value="CT">Connecticut</option>
  988. <option value="DE">Delaware</option>
  989. <option value="FL">Florida</option>
  990. <option value="GA">Georgia</option>
  991. <option value="IN">Indiana</option>
  992. <option value="ME">Maine</option>
  993. <option value="MD">Maryland</option>
  994. <option value="MA">Massachusetts</option>
  995. <option value="MI">Michigan</option>
  996. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  997. <option value="NY">New York</option>
  998. <option value="NC">North Carolina</option>
  999. <option value="OH">Ohio</option>
  1000. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1001. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1002. <option value="WV">West Virginia</option>
  1003. </optgroup>
  1004. </select>
  1005. </div>
  1006. <div class="col-md-2">
  1007. <label for="bootstrap-input-lg" class="control-label">Bootstrap input</label>
  1008. <input id="bootstrap-input-lg" class="form-control input-lg" placeholder=".input-lg">
  1009. </div>
  1010. <div class="col-md-3">
  1011. <div class="form-group has-error">
  1012. <label for="select2-multiple-input-group-lg" class="control-label">col-md-3</label>
  1013. <div class="input-group input-group-lg select2-bootstrap-prepend">
  1014. <span class="input-group-addon">
  1015. <input type="radio">
  1016. </span>
  1017. <select id="select2-multiple-input-group-lg" class="form-control select2">
  1018. <option></option>
  1019. <optgroup label="Alaskan/Hawaiian Time Zone">
  1020. <option value="AK">Alaska</option>
  1021. <option value="HI">Hawaii</option>
  1022. </optgroup>
  1023. <optgroup label="Pacific Time Zone">
  1024. <option value="CA">California</option>
  1025. <option value="NV">Nevada</option>
  1026. <option value="OR">Oregon</option>
  1027. <option value="WA">Washington</option>
  1028. </optgroup>
  1029. <optgroup label="Mountain Time Zone">
  1030. <option value="AZ">Arizona</option>
  1031. <option value="CO">Colorado</option>
  1032. <option value="ID">Idaho</option>
  1033. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1034. <option value="NM">New Mexico</option>
  1035. <option value="ND">North Dakota</option>
  1036. <option value="UT">Utah</option>
  1037. <option value="WY">Wyoming</option>
  1038. </optgroup>
  1039. <optgroup label="Central Time Zone">
  1040. <option value="AL">Alabama</option>
  1041. <option value="AR">Arkansas</option>
  1042. <option value="IL">Illinois</option>
  1043. <option value="IA">Iowa</option>
  1044. <option value="KS">Kansas</option>
  1045. <option value="KY">Kentucky</option>
  1046. <option value="LA">Louisiana</option>
  1047. <option value="MN">Minnesota</option>
  1048. <option value="MS">Mississippi</option>
  1049. <option value="MO">Missouri</option>
  1050. <option value="OK">Oklahoma</option>
  1051. <option value="SD">South Dakota</option>
  1052. <option value="TX">Texas</option>
  1053. <option value="TN">Tennessee</option>
  1054. <option value="WI">Wisconsin</option>
  1055. </optgroup>
  1056. <optgroup label="Eastern Time Zone">
  1057. <option value="CT">Connecticut</option>
  1058. <option value="DE">Delaware</option>
  1059. <option value="FL">Florida</option>
  1060. <option value="GA">Georgia</option>
  1061. <option value="IN">Indiana</option>
  1062. <option value="ME">Maine</option>
  1063. <option value="MD">Maryland</option>
  1064. <option value="MA">Massachusetts</option>
  1065. <option value="MI">Michigan</option>
  1066. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1067. <option value="NY">New York</option>
  1068. <option value="NC">North Carolina</option>
  1069. <option value="OH">Ohio</option>
  1070. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1071. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1072. <option value="WV">West Virginia</option>
  1073. </optgroup>
  1074. </select>
  1075. </div>
  1076. </div>
  1077. </div>
  1078. </div>
  1079. <div class="page-header">
  1080. <h3>
  1081. Button Addons <small><a href="http://getbootstrap.com/components/#input-groups-buttons"><span class="glyphicon glyphicon-link"></span></a></small>
  1082. </h3>
  1083. </div>
  1084. <div class="row">
  1085. <div class="col-md-7">
  1086. <label for="select2-button-addons-single-input-group-sm" class="control-label">Select2 custom data load</label>
  1087. <div class="input-group input-group-sm select2-bootstrap-prepend">
  1088. <div class="input-group-btn">
  1089. <button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-sm">
  1090. State
  1091. </button>
  1092. </div>
  1093. <input id="select2-button-addons-single-input-group-sm" type="hidden" class="form-control select2-remote">
  1094. </div>
  1095. </div>
  1096. <div class="col-md-5">
  1097. <label for="select2-button-addons-multiple-input-group-sm" class="control-label">col-md-5</label>
  1098. <div class="input-group input-group-sm select2-bootstrap-prepend">
  1099. <span class="input-group-btn">
  1100. <button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
  1101. <span class="glyphicon glyphicon-search"></span>
  1102. </button>
  1103. </span>
  1104. <select id="select2-button-addons-multiple-input-group-sm" class="form-control select2-multiple" multiple>
  1105. <optgroup label="Alaskan/Hawaiian Time Zone">
  1106. <option value="AK">Alaska</option>
  1107. <option value="HI">Hawaii</option>
  1108. </optgroup>
  1109. <optgroup label="Pacific Time Zone">
  1110. <option value="CA">California</option>
  1111. <option value="NV">Nevada</option>
  1112. <option value="OR">Oregon</option>
  1113. <option value="WA">Washington</option>
  1114. </optgroup>
  1115. <optgroup label="Mountain Time Zone">
  1116. <option value="AZ">Arizona</option>
  1117. <option value="CO">Colorado</option>
  1118. <option value="ID">Idaho</option>
  1119. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1120. <option value="NM">New Mexico</option>
  1121. <option value="ND">North Dakota</option>
  1122. <option value="UT">Utah</option>
  1123. <option value="WY">Wyoming</option>
  1124. </optgroup>
  1125. <optgroup label="Central Time Zone">
  1126. <option value="AL">Alabama</option>
  1127. <option value="AR">Arkansas</option>
  1128. <option value="IL">Illinois</option>
  1129. <option value="IA">Iowa</option>
  1130. <option value="KS">Kansas</option>
  1131. <option value="KY">Kentucky</option>
  1132. <option value="LA">Louisiana</option>
  1133. <option value="MN">Minnesota</option>
  1134. <option value="MS">Mississippi</option>
  1135. <option value="MO">Missouri</option>
  1136. <option value="OK">Oklahoma</option>
  1137. <option value="SD">South Dakota</option>
  1138. <option value="TX">Texas</option>
  1139. <option value="TN">Tennessee</option>
  1140. <option value="WI">Wisconsin</option>
  1141. </optgroup>
  1142. <optgroup label="Eastern Time Zone">
  1143. <option value="CT">Connecticut</option>
  1144. <option value="DE">Delaware</option>
  1145. <option value="FL">Florida</option>
  1146. <option value="GA">Georgia</option>
  1147. <option value="IN">Indiana</option>
  1148. <option value="ME">Maine</option>
  1149. <option value="MD">Maryland</option>
  1150. <option value="MA">Massachusetts</option>
  1151. <option value="MI">Michigan</option>
  1152. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1153. <option value="NY">New York</option>
  1154. <option value="NC">North Carolina</option>
  1155. <option value="OH">Ohio</option>
  1156. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1157. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1158. <option value="WV">West Virginia</option>
  1159. </optgroup>
  1160. </select>
  1161. </div>
  1162. </div>
  1163. </div>
  1164. <hr>
  1165. <div class="row">
  1166. <div class="col-md-7">
  1167. <label for="select2-button-addons-single-input-group" class="control-label">Select2 custom data load</label>
  1168. <div class="input-group select2-bootstrap-prepend">
  1169. <div class="input-group-btn">
  1170. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  1171. Action <span class="caret"></span>
  1172. </button>
  1173. <ul class="dropdown-menu">
  1174. <li><a href="#">Action</a></li>
  1175. <li><a href="#">Another action</a></li>
  1176. <li><a href="#">Something else here</a></li>
  1177. <li class="divider"></li>
  1178. <li><a href="#">Separated link</a></li>
  1179. </ul>
  1180. </div>
  1181. <input id="select2-button-addons-single-input-group" type="hidden" class="form-control select2-remote">
  1182. </div>
  1183. </div>
  1184. <div class="col-md-5">
  1185. <label for="select2-input-group-append" class="control-label">col-md-5</label>
  1186. <div class="input-group has-warning select2-bootstrap-prepend">
  1187. <span class="input-group-btn">
  1188. <button class="btn btn-default" type="button" data-select2-open="select2-input-group-append">
  1189. <span class="glyphicon glyphicon-search"></span>
  1190. </button>
  1191. </span>
  1192. <select id="select2-input-group-append" class="form-control select2-multiple" multiple>
  1193. <optgroup label="Alaskan/Hawaiian Time Zone">
  1194. <option value="AK">Alaska</option>
  1195. <option value="HI">Hawaii</option>
  1196. </optgroup>
  1197. <optgroup label="Pacific Time Zone">
  1198. <option value="CA">California</option>
  1199. <option value="NV">Nevada</option>
  1200. <option value="OR">Oregon</option>
  1201. <option value="WA">Washington</option>
  1202. </optgroup>
  1203. <optgroup label="Mountain Time Zone">
  1204. <option value="AZ">Arizona</option>
  1205. <option value="CO">Colorado</option>
  1206. <option value="ID">Idaho</option>
  1207. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1208. <option value="NM">New Mexico</option>
  1209. <option value="ND">North Dakota</option>
  1210. <option value="UT">Utah</option>
  1211. <option value="WY">Wyoming</option>
  1212. </optgroup>
  1213. <optgroup label="Central Time Zone">
  1214. <option value="AL">Alabama</option>
  1215. <option value="AR">Arkansas</option>
  1216. <option value="IL">Illinois</option>
  1217. <option value="IA">Iowa</option>
  1218. <option value="KS">Kansas</option>
  1219. <option value="KY">Kentucky</option>
  1220. <option value="LA">Louisiana</option>
  1221. <option value="MN">Minnesota</option>
  1222. <option value="MS">Mississippi</option>
  1223. <option value="MO">Missouri</option>
  1224. <option value="OK">Oklahoma</option>
  1225. <option value="SD">South Dakota</option>
  1226. <option value="TX">Texas</option>
  1227. <option value="TN">Tennessee</option>
  1228. <option value="WI">Wisconsin</option>
  1229. </optgroup>
  1230. <optgroup label="Eastern Time Zone">
  1231. <option value="CT">Connecticut</option>
  1232. <option value="DE">Delaware</option>
  1233. <option value="FL">Florida</option>
  1234. <option value="GA">Georgia</option>
  1235. <option value="IN">Indiana</option>
  1236. <option value="ME">Maine</option>
  1237. <option value="MD">Maryland</option>
  1238. <option value="MA">Massachusetts</option>
  1239. <option value="MI">Michigan</option>
  1240. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1241. <option value="NY">New York</option>
  1242. <option value="NC">North Carolina</option>
  1243. <option value="OH">Ohio</option>
  1244. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1245. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1246. <option value="WV">West Virginia</option>
  1247. </optgroup>
  1248. </select>
  1249. </div>
  1250. </div>
  1251. </div>
  1252. <hr>
  1253. <div class="row">
  1254. <div class="col-md-7">
  1255. <label for="select2-button-addons-single-input-group-lg" class="control-label">Select2 custom data load</label>
  1256. <div class="input-group input-group-lg select2-bootstrap-append">
  1257. <input id="select2-button-addons-single-input-group-lg" type="hidden" class="form-control select2-remote" value="1296269">
  1258. <span class="input-group-btn">
  1259. <button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-lg">
  1260. <span class="glyphicon glyphicon-search"></span>
  1261. </button>
  1262. </span>
  1263. </div>
  1264. </div>
  1265. <div class="col-md-5">
  1266. <label for="select2-button-addons-multi-input-group-lg" class="control-label">col-md-5</label>
  1267. <div class="input-group input-group-lg select2-bootstrap-prepend">
  1268. <span class="input-group-btn">
  1269. <button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multi-input-group-lg">
  1270. <span class="glyphicon glyphicon-search"></span>
  1271. </button>
  1272. </span>
  1273. <select id="select2-button-addons-multi-input-group-lg" class="form-control select2-multiple" multiple>
  1274. <optgroup label="Alaskan/Hawaiian Time Zone">
  1275. <option value="AK">Alaska</option>
  1276. <option value="HI">Hawaii</option>
  1277. </optgroup>
  1278. <optgroup label="Pacific Time Zone">
  1279. <option value="CA">California</option>
  1280. <option value="NV">Nevada</option>
  1281. <option value="OR">Oregon</option>
  1282. <option value="WA">Washington</option>
  1283. </optgroup>
  1284. <optgroup label="Mountain Time Zone">
  1285. <option value="AZ">Arizona</option>
  1286. <option value="CO">Colorado</option>
  1287. <option value="ID">Idaho</option>
  1288. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1289. <option value="NM">New Mexico</option>
  1290. <option value="ND">North Dakota</option>
  1291. <option value="UT">Utah</option>
  1292. <option value="WY">Wyoming</option>
  1293. </optgroup>
  1294. <optgroup label="Central Time Zone">
  1295. <option value="AL">Alabama</option>
  1296. <option value="AR">Arkansas</option>
  1297. <option value="IL">Illinois</option>
  1298. <option value="IA">Iowa</option>
  1299. <option value="KS">Kansas</option>
  1300. <option value="KY">Kentucky</option>
  1301. <option value="LA">Louisiana</option>
  1302. <option value="MN">Minnesota</option>
  1303. <option value="MS">Mississippi</option>
  1304. <option value="MO">Missouri</option>
  1305. <option value="OK">Oklahoma</option>
  1306. <option value="SD">South Dakota</option>
  1307. <option value="TX">Texas</option>
  1308. <option value="TN">Tennessee</option>
  1309. <option value="WI">Wisconsin</option>
  1310. </optgroup>
  1311. <optgroup label="Eastern Time Zone">
  1312. <option value="CT">Connecticut</option>
  1313. <option value="DE">Delaware</option>
  1314. <option value="FL">Florida</option>
  1315. <option value="GA">Georgia</option>
  1316. <option value="IN">Indiana</option>
  1317. <option value="ME">Maine</option>
  1318. <option value="MD">Maryland</option>
  1319. <option value="MA">Massachusetts</option>
  1320. <option value="MI">Michigan</option>
  1321. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1322. <option value="NY">New York</option>
  1323. <option value="NC">North Carolina</option>
  1324. <option value="OH">Ohio</option>
  1325. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1326. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1327. <option value="WV">West Virginia</option>
  1328. </optgroup>
  1329. </select>
  1330. </div>
  1331. </div>
  1332. </div>
  1333. <div class="page-header">
  1334. <h3>Disabled inputs <small><a href="http://getbootstrap.com/css/#forms-control-states"><span class="glyphicon glyphicon-link"></span></a></small></h3>
  1335. </div>
  1336. <div class="row">
  1337. <div class="col-md-6">
  1338. <div class="form-group">
  1339. <label for="select2-disabled-inputs-single" class="control-label">col-md-3</label>
  1340. <div class="input-group select2-bootstrap-prepend">
  1341. <span class="input-group-addon">
  1342. <input type="checkbox">
  1343. </span>
  1344. <select id="select2-disabled-inputs-single" class="form-control select2" disabled>
  1345. <option></option>
  1346. <optgroup label="Alaskan/Hawaiian Time Zone">
  1347. <option value="AK">Alaska</option>
  1348. <option value="HI">Hawaii</option>
  1349. </optgroup>
  1350. <optgroup label="Pacific Time Zone">
  1351. <option value="CA">California</option>
  1352. <option value="NV">Nevada</option>
  1353. <option value="OR">Oregon</option>
  1354. <option value="WA">Washington</option>
  1355. </optgroup>
  1356. <optgroup label="Mountain Time Zone">
  1357. <option value="AZ">Arizona</option>
  1358. <option value="CO">Colorado</option>
  1359. <option value="ID">Idaho</option>
  1360. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1361. <option value="NM">New Mexico</option>
  1362. <option value="ND">North Dakota</option>
  1363. <option value="UT">Utah</option>
  1364. <option value="WY">Wyoming</option>
  1365. </optgroup>
  1366. <optgroup label="Central Time Zone">
  1367. <option value="AL">Alabama</option>
  1368. <option value="AR">Arkansas</option>
  1369. <option value="IL">Illinois</option>
  1370. <option value="IA">Iowa</option>
  1371. <option value="KS">Kansas</option>
  1372. <option value="KY">Kentucky</option>
  1373. <option value="LA">Louisiana</option>
  1374. <option value="MN">Minnesota</option>
  1375. <option value="MS">Mississippi</option>
  1376. <option value="MO">Missouri</option>
  1377. <option value="OK">Oklahoma</option>
  1378. <option value="SD">South Dakota</option>
  1379. <option value="TX">Texas</option>
  1380. <option value="TN">Tennessee</option>
  1381. <option value="WI">Wisconsin</option>
  1382. </optgroup>
  1383. <optgroup label="Eastern Time Zone">
  1384. <option value="CT">Connecticut</option>
  1385. <option value="DE">Delaware</option>
  1386. <option value="FL">Florida</option>
  1387. <option value="GA">Georgia</option>
  1388. <option value="IN">Indiana</option>
  1389. <option value="ME">Maine</option>
  1390. <option value="MD">Maryland</option>
  1391. <option value="MA">Massachusetts</option>
  1392. <option value="MI">Michigan</option>
  1393. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1394. <option value="NY">New York</option>
  1395. <option value="NC">North Carolina</option>
  1396. <option value="OH">Ohio</option>
  1397. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1398. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1399. <option value="WV">West Virginia</option>
  1400. </optgroup>
  1401. </select>
  1402. </div>
  1403. </div>
  1404. </div>
  1405. <div class="col-md-6">
  1406. <div class="form-group">
  1407. <label for="select2-disabled-inputs-multiple" class="control-label">col-md-3</label>
  1408. <div class="input-group select2-bootstrap-prepend">
  1409. <span class="input-group-addon">
  1410. <input type="checkbox" checked>
  1411. </span>
  1412. <select id="select2-disabled-inputs-multiple" class="form-control select2-multiple" multiple>
  1413. <option></option>
  1414. <optgroup label="Alaskan/Hawaiian Time Zone">
  1415. <option value="AK">Alaska</option>
  1416. <option value="HI">Hawaii</option>
  1417. </optgroup>
  1418. <optgroup label="Pacific Time Zone">
  1419. <option value="CA">California</option>
  1420. <option value="NV">Nevada</option>
  1421. <option value="OR">Oregon</option>
  1422. <option value="WA">Washington</option>
  1423. </optgroup>
  1424. <optgroup label="Mountain Time Zone">
  1425. <option value="AZ">Arizona</option>
  1426. <option value="CO">Colorado</option>
  1427. <option value="ID">Idaho</option>
  1428. <option value="MT">Montana</option><option value="NE">Nebraska</option>
  1429. <option value="NM">New Mexico</option>
  1430. <option value="ND">North Dakota</option>
  1431. <option value="UT">Utah</option>
  1432. <option value="WY">Wyoming</option>
  1433. </optgroup>
  1434. <optgroup label="Central Time Zone">
  1435. <option value="AL">Alabama</option>
  1436. <option value="AR">Arkansas</option>
  1437. <option value="IL">Illinois</option>
  1438. <option value="IA">Iowa</option>
  1439. <option value="KS">Kansas</option>
  1440. <option value="KY">Kentucky</option>
  1441. <option value="LA">Louisiana</option>
  1442. <option value="MN">Minnesota</option>
  1443. <option value="MS">Mississippi</option>
  1444. <option value="MO">Missouri</option>
  1445. <option value="OK">Oklahoma</option>
  1446. <option value="SD">South Dakota</option>
  1447. <option value="TX">Texas</option>
  1448. <option value="TN">Tennessee</option>
  1449. <option value="WI">Wisconsin</option>
  1450. </optgroup>
  1451. <optgroup label="Eastern Time Zone">
  1452. <option value="CT">Connecticut</option>
  1453. <option value="DE">Delaware</option>
  1454. <option value="FL">Florida</option>
  1455. <option value="GA">Georgia</option>
  1456. <option value="IN">Indiana</option>
  1457. <option value="ME">Maine</option>
  1458. <option value="MD">Maryland</option>
  1459. <option value="MA">Massachusetts</option>
  1460. <option value="MI">Michigan</option>
  1461. <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
  1462. <option value="NY">New York</option>
  1463. <option value="NC">North Carolina</option>
  1464. <option value="OH">Ohio</option>
  1465. <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
  1466. <option value="VT">Vermont</option><option value="VA">Virginia</option>
  1467. <option value="WV">West Virginia</option>
  1468. </optgroup>
  1469. </select>
  1470. </div>
  1471. </div>
  1472. </div>
  1473. </div>
  1474. </div>
  1475. <div class="footer">
  1476. <div class="container">
  1477. <ul class="footer-links">
  1478. <li class="version"><span class="hidden-xs">Currently</span> v1.4.6</li>
  1479. <li>&middot;</li>
  1480. <li><a href="https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3">GitHub</a></li>
  1481. <li>&middot;</li>
  1482. <li><a href="https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3#readme">Readme</a></li>
  1483. <li>&middot;</li>
  1484. <li><a href="https://github.com/t0m/select2-bootstrap-css">Bootstrap 2 version</a></li>
  1485. </ul>
  1486. <small>
  1487. <a href="http://getbootstrap.com">Bootstrap</a> is a front-end framework for fast, sleek, and mobile-first web development.<br>
  1488. <a href="http://select2.com">Select2</a> is a jQuery based replacement for select boxes.
  1489. </small>
  1490. </div>
  1491. </div>
  1492. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  1493. <script src="//select2.github.io/select2/select2-3.4.5/select2.js"></script>
  1494. <script src="js/bootstrap.min.js"></script>
  1495. <script>
  1496. var placeholder = "Select a State";
  1497. $( ".select2, .select2-multiple" ).select2( { placeholder: placeholder } );
  1498. $( ".select2-allow-clear" ).select2( { allowClear: true, placeholder: placeholder } );
  1499. // @see https://github.com/ivaynberg/select2/commit/6661e3
  1500. function repoFormatResult( repo ) {
  1501. var markup = "<div class='select2-result-repository clearfix'>" +
  1502. "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
  1503. "<div class='select2-result-repository__meta'>" +
  1504. "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
  1505. if ( repo.description ) {
  1506. markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  1507. }
  1508. markup += "<div class='select2-result-repository__statistics'>" +
  1509. "<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
  1510. "<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
  1511. "<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
  1512. "</div>" +
  1513. "</div></div>";
  1514. return markup;
  1515. }
  1516. function repoFormatSelection( repo ) {
  1517. return repo.full_name;
  1518. }
  1519. $( ".select2-remote" ).select2({
  1520. placeholder: "Search for a GitHub Repository",
  1521. minimumInputLength: 1,
  1522. // instead of writing the function to execute the request we use Select2's convenient helper
  1523. ajax: {
  1524. url: "https://api.github.com/search/repositories",
  1525. dataType: "json",
  1526. quietMillis: 250,
  1527. data: function( term, page ) {
  1528. return {
  1529. // search term
  1530. q: term
  1531. };
  1532. },
  1533. results: function( data, page ) {
  1534. // parse the results into the format expected by Select2.
  1535. // since we are using custom formatting functions we do not need to alter the remote JSON data
  1536. return { results: data.items };
  1537. },
  1538. cache: true
  1539. },
  1540. initSelection: function( element, callback ) {
  1541. // the input tag has a value attribute preloaded that points to a preselected repository's id
  1542. // this function resolves that id attribute to an object that select2 can render
  1543. // using its formatResult renderer - that way the repository name is shown preselected
  1544. var id = $( element ).val();
  1545. if ( id !== "" ) {
  1546. $.ajax( "https://api.github.com/repositories/" + id, {
  1547. dataType: "json"
  1548. }).done( function( data ) {
  1549. callback( data );
  1550. });
  1551. }
  1552. },
  1553. formatResult: repoFormatResult,
  1554. formatSelection: repoFormatSelection,
  1555. // apply css that makes the dropdown taller
  1556. dropdownCssClass: "bigdrop",
  1557. // we do not want to escape markup since we are displaying html in results
  1558. escapeMarkup: function( m ) {
  1559. return m;
  1560. }
  1561. });
  1562. $( "button[data-select2-open]" ).click( function() {
  1563. $( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
  1564. });
  1565. var select2OpenEventName = "select2-open";
  1566. $( ":checkbox" ).on( "click", function() {
  1567. $( this ).parent().nextAll( "select" ).select2( "enable", this.checked );
  1568. });
  1569. $( ".select2, .select2-multiple, .select2-allow-clear, .select2-remote" ).on( select2OpenEventName, function() {
  1570. if ( $( this ).parents( "[class*='has-']" ).length ) {
  1571. var classNames = $( this ).parents( "[class*='has-']" )[ 0 ].className.split( /\s+/ );
  1572. for ( var i = 0; i < classNames.length; ++i ) {
  1573. if ( classNames[ i ].match( "has-" ) ) {
  1574. $( "#select2-drop" ).addClass( classNames[ i ] );
  1575. }
  1576. }
  1577. }
  1578. });
  1579. </script>
  1580. </body>
  1581. </html>