Speed up development with full-stack environments for every branch.

Learn More

How to create jQuery UI MultiSelect Widget

12390 Runs 37773 Views 11416 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
	<title>How to create jQuery UI MultiSelect Widget</title>
	
	<link rel="stylesheet" type="text/css" href="src/jquery.multiselect.css" />
	<link rel="stylesheet" type="text/css" href="src/jquery.multiselect.filter.css" />
	<link rel="stylesheet" type="text/css" href="assets/style.css" />
	<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
	<script type="text/javascript" src="src/jquery.multiselect.js"></script>
	<script type="text/javascript" src="src/jquery.multiselect.filter.js"></script>
	<script type="text/javascript" src="assets/prettify.js"></script>
	<script type="text/javascript">
		$(function()
		{
			/*
				define global variable,
				and store message container element.
			*/
			var warning = $(".message");

			$("select").multiselect(
			{
				/*
					The name of the effect to use when the menu opens.
					To control the speed as well, pass in an array
				*/
				show: ["slide", 1000],
				/*
					The name of the effect to use when the menu closes.
					To control the speed as well, pass in an array
				*/
				hide: ["explode", 1000],
				/*
					Either a boolean value denoting whether or not to display the header,
					or a string value.
					If you pass a string,
					the default "check all", "uncheck all", and "close"
					links will be replaced with the specified text.
				*/
			    header: "Choose only THREE items!",
				/*
					Fires when a checkbox is checked or unchecked,
					we are using this option to restrict,
					user to select no more than 3 option
				*/
				click: function(e)
				{
					if( $(this).multiselect("widget").find("input:checked").length > 3 )
					{
						warning.addClass("error").removeClass("success").html("You can only check three checkboxes!");
						return false;
					}
					else
					{
						warning.addClass("success").removeClass("error").html("Check a few boxes.");
					}
				}
			/*
				.multiselectfilter()
				Initialize filtering on any of your multiselects
				by calling multiselectfilter() on the widget.
			*/
			}).multiselectfilter();
		});
	</script>
</head>
<body onload="prettyPrint();">
	<div id="container">
		<!--Message Container-->
		<p class="message success">Message</p>
		
		<!--
			Drop Down
			will be converted into custom drop down with filter options
		-->
		<p>
			<select multiple="multiple" style="width:370px">
				<option value="red">Red</option>
				<option value="green">Green</option>
				<option value="blue">Blue</option>
				<option value="orange">Orange</option>
				<option value="purple">Purple</option>
				<option value="yellow">Yellow</option>
				<option value="brown">Brown</option>
				<option value="black">Black</option>
			</select>
		</p>
	</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).