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


dipesh.parmar 55

published 4 years ago

<html lang="en-US">
  <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">
				define global variable,
				and store message container element.
			var warning = $(".message");

					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;
						warning.addClass("success").removeClass("error").html("Check a few boxes.");
				Initialize filtering on any of your multiselects
				by calling multiselectfilter() on the widget.
<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
			<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>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).