Demo jquery-multiSelect

Some description, please keep it in one line author(s): Vianney DUBUS

HTML

<script src="https://cdn.jsdelivr.net/gh/vdubus/jquery-multiSelect@master/jquery-multiSelect.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vdubus/jquery-multiSelect@master/jquery-multiSelect.css">
<!-- <!DOCTYPE html> -->
<!-- <html> -->
<!-- <head> -->
<!-- <meta charset="UTF-8"> -->
<!-- <title>Insert title here</title> -->
<!-- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> -->
<!-- <link rel="stylesheet" href="../jquery-multiSelect.css" /> -->
<!-- <link rel="stylesheet" href="./demo.css" /> -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> -->
<!-- <script type="text/javascript" src="../jquery-multiSelect.js"></script> -->
<!-- <script type="text/javascript" src="./demo.js"></script> -->
<!-- </head> -->
<!-- <body> -->
	<div>
		<form action="">
			<fieldset>
				<legend>MultiSelect with add button</legend>
				<p class="displayAsTable">
					<label for="multiSelect">MultiSelect 1</label>
					<select id="multiSelect" name="multiSelect" multiple="multiple">
						<option value="1">Value 1</option>
						<option value="2">Value 2</option>
						<option value="3">Value 3</option>
						<option value="4">Value 4</option>
						<option value="5">Value 5</option>
					</select>
				</p>
			</fieldset>
			<fieldset>
				<legend>MultiSelect listening to change event</legend>
				<p>
					<label for="multiSelect2">MultiSelect 2</label>
					<select id="multiSelect2" name="multiSelect2" multiple="multiple">
						<option value="1" selected="selected">Value 1</option>
						<option value="2">Value 2</option>
						<option value="3">Value 3</option>
						<option value="4" selected="selected">Value 4</option>
						<option value="5">Value...

CSS

label {
	display: inline-block;
	width: 10em;
}

p.displayAsTable {
	display: table-row;
}

p.displayAsTable>label, p.displayAsTable>span.vdubus-multiSelect {
	display: table-cell;
}

JavaScript

(function($) {

	function initialization() {

		var multiSelect = $("#multiSelect").on("change", function() {
			if (console && console.log) {
				console.log("change detected");
			}
		}).multiSelect();

		var multiSelect2 = $("#multiSelect2").on("change", function() {
			if (console && console.log) {
				console.log("change detected");
			}
		}).multiSelect({
			enableChangeMode : true,
			emptyOptionLabel : "no value"
		});

		// This button must destroy the first multiselect component.
		$("#destroyMultiSelect").on("click", function(event) {
			event.preventDefault();
			if (multiSelect.data("vdubus-multiSelect")) {
				multiSelect.multiSelect("destroy");
			}
			if (multiSelect2.data("vdubus-multiSelect")) {
				multiSelect2.multiSelect("destroy");
			}
		});
		$("#createMultiSelect").on("click", function(event) {
			event.preventDefault();
			if (!multiSelect.data("vdubus-multiSelect")) {
				multiSelect.multiSelect();
			}
			if (!multiSelect2.data("vdubus-multiSelect")) {
				multiSelect2.multiSelect({
					enableChangeMode : true,
					emptyOptionLabel : "no value"
				});
			}
		});

		// This button will update the available options in the select.
		$("#addValueInMultiSelect").on("click", function(event) {
			event.preventDefault();
			var newValue = +multiSelect.find("option").last().prop("value") + 1;
			$("<option />").prop("value", newValue).text("Value " + newValue).appendTo(multiSelect);
			if (multiSelect.data("vdubus-multiSelect")) {
				multiSelect.multiSelect("refresh");
			}

			// Add new element in second multiselect.
			newValue = +multiSelect2.find("option").last().prop("value") + 1;
			$("<option />").prop("value", newValue).text("Value " + newValue).appendTo(multiSelect2);
			if (multiSelect2.data("vdubus-multiSelect")) {
				multiSelect2.multiSelect("refresh");
			}
		});

		// This form will verify le selected values.
		$("form").on("submit", function(event) {
			event.preventDefault();
			var message = "MultiSelect 1 = " +...