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


Popular posts from this blog