JSFiddle - React, Tailwind, and code Playground

by Sivasakthi Chandrasekaran

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" text="text/javascript"></script>
		<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js" text="text/javascript"></script>
		<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.filter.js" text="text/javascript"></script>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.filter.css" type="text/css" media="all" />
		
	    <html><body>
				<select name="word_type[]" id="word_type" multiple="multiple" >
				<option value="hello">hello</option>
				<option value="world">world</option>
				</select>
				</body>
				</html>

JavaScript

$(document).ready(function(){

			  
			$("#word_type").multiselect({ 
				  header: "Maximum 10 word types can be selected.Leave blank to get data for all word types",
			      noneSelectedText: 'Select word Type',
			      selectedList: 4,
			      minWidth:500,
			      click: function(e){
			          if( $(this).multiselect("widget").find("input:checked").length > 10 ){
			                return false;
			          } 
			      },
			      close: function(event, ui){
				      if($("#word_type").val()==null)
				      {
				    	 wordType = 'null';
				      }
				      else
				      {
				    	  wordType = $("#word_type").val(); 
				      }                

			      } 
			   }).multiselectfilter(); 
			
			});