How to use Multi-Select Dropdown List in html select input using Jquery in JSP page with limited selections ?

Below Code Snippet shows Selecting Multiple Values

 $(document).ready(function() {
        
     $("#multiselect").dropdownchecklist( {
onItemClick: function(checkbox, selector){
 var justChecked = checkbox.prop("checked");
 var checkCount = (justChecked) ? 1 : -1;
 for( i = 0; i < selector.options.length; i++ ){
  if ( selector.options[i].selected ) checkCount += 1;
 }
    if ( checkCount > 3 ) {
  alert( "Limit is 3 fruits to choose" );
  throw "too many";
 }
},width: 250 
            });    
    });

Below code index.jsp page with jquery javascript, css, Ui, codes are imported

 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Multiple Select Example Jquery</title>
<link rel="stylesheet" type="text/css" href="smoothness-1.8.13/jquery-ui-1.8.13.custom.css">
<link rel="stylesheet" type="text/css" href="src/ui.dropdownchecklist.themeroller.css">
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
    
    <!-- Include the DropDownCheckList supoprt -->
    <script type="text/javascript" src="src/ui.dropdownchecklist.js"></script>

</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        
     $("#multiselect").dropdownchecklist( {
onItemClick: function(checkbox, selector){
 var justChecked = checkbox.prop("checked");
 var checkCount = (justChecked) ? 1 : -1;
 for( i = 0; i < selector.options.length; i++ ){
  if ( selector.options[i].selected ) checkCount += 1;
 }
    if ( checkCount > 3 ) {
  alert( "Limit is 3 fruits to choose" );
  throw "too many";
 }
},width: 250 
            });    
    });
            </script>
Select Fruits <select id="multiselect" class="multiselect" multiple>
             <option value='a'>Apple</option>
             <option value='b'>Mango</option>
             <option value='c'>Orange</option>
             <option value='d'>Strawberry</option>
             <option value='e'>Banana</option>
         </select>


</body>
</html>

Output Page:

Java Swing MySql JDBC: insert data into database

Program import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.sql.*; public class insertswing implements ActionListener { JFrame fr;JPanel po; JLabel l1,l2,main; JTextField tf1,tf2; GridBagConstraints gbc; GridBagLayout go; JButton ok,exit; public insertswing(){ fr=new JFrame("New User Data "); Font f=new Font("Verdana",Font.BOLD,24); po=new JPanel(); fr.getContentPane().add(po); fr.setVisible(true); fr.setSize(1024,768); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); po.setBackground(Color.WHITE); go=new GridBagLayout(); gbc=new GridBagConstraints(); po.setLayout(go); main=new JLabel("Enter User Details "); main.setFont(f); l1=new JLabel("Name :");tf1=new JTextField(20); l2=new JLabel("User Name :");tf2=new JTextField(20); ok=new JButton("Accept"); exit=new JButton("Exit"); gbc.anchor=GridBagConstraints.NORTH;gbc.gridx=5;gbc.gridy=0; go.s...

JSP and Servlet Form Submission without page refresh show results on the same page using Jquery AJAX

Code Snippet HTML Form <form id='ajaxform' name='ajaxform' action='ajaxformexample' method='post'> First Name: <input type='text' id='firstname' name='firstname' size='30' required/><br/> Last Name: <input type='text' id='lastname' name='lastname' size='30'required/><br/> Email: <input type='email' id='emailid' name='emailid' size='30'required/><br/> Password: <input type='password' id='pwd' name='pwd' size='30'required/><br/> <input type='Submit'/> <div id='content'> </div> </form> the above HTML Form uses post method and url servlet redirect to " ajaxformexample " Javascript Code var form = $('#ajaxform'); // id of form tag form.submit(function () { $.ajax({ ...

Guidewire Related Interview Question and answers part 1

common Guidewire questions and answers 20 Guidewire BC Q&A Top 100 Guidewire Interview FAQ Guidewire Claimcenter 20 Interview Questions Guidewire Rating concepts

UnknownSunday, 26 January 2014 at 20:43:00 GMT+5:30
Lovely ....helpful
Kumaran KanniappanSunday, 26 January 2014 at 20:49:00 GMT+5:30
@Chandaneswar Sengupta Thank u Dude Working out a lot :-) and adding those workout sample projects are uploaded in github so check out my github repo too!!! here --> https://github.com/kumaran1987/ check out my sample projects

Kumaran1987

Search This Blog