Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Saturday, May 31, 2014

How to Achieve Many Selection in Drop Down List

How to Achieve Many Selection in Drop Down List in asp.net Programming :

For Achieve Many Selection in Drop Down List in Asp.net Programming,Drop Down List control of Asp.net  is used to give a single select option to the user from many items. You can give specific height and width in pixel by setting its height and width but you will not be able give multiple select option to the asp.net Programmer that set it as like check box list. when page load then it is rendered on the page, it is implemented through <select/>  tag. 
Drop Down List control of .Net Programming properties like Back-color,
Fore-color,align  etc. are implemented through style properties of <span>. 
It has less property to decorate in comparison with other controls.
There is no property like Border-style, Border-width. in Drop Down List control of Asp.Net.

But many time the programmer need to select many items in Drop down list for this, here we give some example in Asp.net ,here some segment of code that is use Jquery in html for achieving this. 

Code  of Asp page:-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="DropDowncss/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="DropDowncss/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
    <style type="text/css">
        #chkveg
        {
            width: 293px;
            height: 73px;
        }
    </style>
</head>
<body>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple" onclick="return chkveg_onclick()">

<option value="sunday">sunday</option>

<option value="monday">monday</option>
<option value="tusday">tusday</option>
<option value="wednessday">wednessday</option>
<option value="thresday">thresday</option>
<option value="friday">friday</option>
<option value="saterday">saterday</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
    $(function () {
        $('#chkveg').multiselect({
            includeSelectAllOption: true
        });
        $('#btnget').click(function () {
            alert($('#chkveg').val());
        })
    });
    function chkveg_onclick() {

    }


</script>

</div>
</form>
</body>
</html>

http://en.wikipedia.org/wiki/Main_Page/multiselectionin_drop_down_list_in_asp.net_programming
http://en.wikipedia.org/wiki/Main_Page/multiselectionin_drop_down_list_in_asp.net_programming
Asp.net Programming

You can add its option items by directly writing into .aspx page directly 
or dynamically add at run time or bind through database.

for achieving to this goal you want to download two files css file and two .js (JQuery) files.


.css file that you want are :-



1. bootstrap-3.1.1.min.css

2. bootstrap-multiselect.css

And .js files are :-



1. bootstrap-2.3.2.min.js.

2. bootstrap-2.3.2.min.js


Here included some javascript or Jquery on Asp.net page :-


<script type="text/javascript">
    $(function () {
        $('#chkveg').multiselect({
            includeSelectAllOption: true
        });
        $('#btnget').click(function () {
            alert($('#chkveg').val());
        })
    });

</script>

Example : More Related Post :- 


jQuery Multi Select Dropdown with Checkboxes