index.html

<!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({
                selectedContainerOnRight: false,
                dividerLocation: 0.4
            });
			$('#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>