Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Michael Aufreiter
204 lines (184 sloc) 9.323 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect();
$('#switcher').themeswitcher();
});
</script>
</head>
<body>
<a href="http://github.com/michael/multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
<div id="wrapper">
<div id="header">
<h1>jQuery UI Multiselect</h1>
<p>
Another attempt of a <em>sortable</em>, <em>searchable</em> multiple select widget
</p>
<ul id="nav">
<li><a href="http://quasipartikel.at/2009/05/10/jqueryui-multiselect/">Blogpost</a></li>
<li><a href="http://github.com/michael/multiselect">Source</a></li>
<li><a href="http://github.com/michael/multiselect/zipball/master">Download</a></li>
<li><a href="http://github.com/michael/multiselect/issues">Bugs</a></li>
</ul>
</div>
<div id="content">
<p>
It depends on <a href="http://jquery.com/">jQuery 1.5</a> and <a href="http://jqueryui.com/">jQuery UI 1.8</a>.
The widget is styleable using <a href="http://jqueryui.com/themeroller/" title="jQuery UI Themeroller">Themeroller</a>.
It works in an <em>unobtrusive</em> fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed.
</p>
<ul>
<li>For installation instructions please have a look at the corresponding <a href="http://www.quasipartikel.at/2009/05/10/jqueryui-multiselect/">blogpost</a></li>
<li>Source code is available at <a href="http://github.com/michael/multiselect/" title="Social Coding">Github</a></li>
<li>In case you are looking for the original version, it has been moved <a href="http://quasipartikel.at/multiselect_original/">here</a></li>
</ul><br/>
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AUT" selected="selected">Austria</option>
<option value="AZE">Azerbaijan</option>
<option value="BGD">Bangladesh</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
<option value="BIH">Bosnia and Herzegovina</option>
<option value="BRA">Brazil</option>
<option value="BRN">Brunei</option>
<option value="BGR">Bulgaria</option>
<option value="CAN">Canada</option>
<option value="CHN">China</option>
<option value="COL">Colombia</option>
<option value="HRV">Croatia</option>
<option value="CYP">Cyprus</option>
<option value="CZE">Czech Republic</option>
<option value="DNK">Denmark</option>
<option value="EGY">Egypt</option>
<option value="EST">Estonia</option>
<option value="FIN">Finland</option>
<option value="FRA">France</option>
<option value="GEO">Georgia</option>
<option value="DEU" selected="selected">Germany</option>
<option value="GRC">Greece</option>
<option value="HKG">Hong Kong</option>
<option value="HUN">Hungary</option>
<option value="ISL">Iceland</option>
<option value="IND">India</option>
<option value="IDN">Indonesia</option>
<option value="IRN">Iran</option>
<option value="IRL">Ireland</option>
<option value="ISR">Israel</option>
<option value="ITA">Italy</option>
<option value="JPN">Japan</option>
<option value="JOR">Jordan</option>
<option value="KAZ">Kazakhstan</option>
<option value="KWT">Kuwait</option>
<option value="KGZ">Kyrgyzstan</option>
<option value="LVA">Latvia</option>
<option value="LBN">Lebanon</option>
<option value="LIE">Liechtenstein</option>
<option value="LTU">Lithuania</option>
<option value="LUX">Luxembourg</option>
<option value="MAC">Macau</option>
<option value="MKD">Macedonia</option>
<option value="MYS">Malaysia</option>
<option value="MLT">Malta</option>
<option value="MEX">Mexico</option>
<option value="MDA">Moldova</option>
<option value="MNG">Mongolia</option>
<option value="NLD" selected="selected">Netherlands</option>
<option value="NZL">New Zealand</option>
<option value="NGA">Nigeria</option>
<option value="NOR">Norway</option>
<option value="PER">Peru</option>
<option value="PHL">Philippines</option>
<option value="POL">Poland</option>
<option value="PRT">Portugal</option>
<option value="QAT">Qatar</option>
<option value="ROU">Romania</option>
<option value="RUS">Russia</option>
<option value="SMR">San Marino</option>
<option value="SAU">Saudi Arabia</option>
<option value="CSG">Serbia and Montenegro</option>
<option value="SGP">Singapore</option>
<option value="SVK">Slovakia</option>
<option value="SVN">Slovenia</option>
<option value="ZAF">South Africa</option>
<option value="KOR">South Korea</option>
<option value="ESP">Spain</option>
<option value="LKA">Sri Lanka</option>
<option value="SWE">Sweden</option>
<option value="CHE">Switzerland</option>
<option value="SYR">Syria</option>
<option value="TWN">Taiwan</option>
<option value="TJK">Tajikistan</option>
<option value="THA">Thailand</option>
<option value="TUR">Turkey</option>
<option value="TKM">Turkmenistan</option>
<option value="UKR">Ukraine</option>
<option value="ARE">United Arab Emirates</option>
<option value="GBR">United Kingdom</option>
<option value="USA" selected="selected">United States</option>
<option value="UZB">Uzbekistan</option>
<option value="VAT">Vatican City</option>
<option value="VNM">Vietnam</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All / Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li><a href="http://github.com/michael/multiselect/">Michael Aufreiter</a></li>
<li><a href="http://github.com/yanickrochon/multiselect">Yanick Rochon</a></li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Other active projects</h2>
<ul>
<li><a href="http://quasipartikel.at/proper">PROPER™ — Semantic Richtext Editor</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://substance.io">Substance — Open Documents For The Web</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://substance.io/#michael/data-js">Data.js — Javascript Data Manipulation</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://quasipartikel.at/donut">DONUT™ - Radial Navigator</a></li>
</ul>
</div>
<div id="footer">
<p class="left">A <a href="http://quasipartikel.at/">Quasipartikel</a> Production</p>
<p class="right">Template adopted from <a href="http://orderedlist.com/demos/fancy-zoom-jquery/">orderedlist.com</a></p>
<br class="clear"/>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.