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.
<!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>
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.
1. bootstrap-3.1.1.min.css
2. bootstrap-multiselect.css
1. bootstrap-2.3.2.min.js.
2. bootstrap-2.3.2.min.js
<script type="text/javascript">
$(function () {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function () {
alert($('#chkveg').val());
})
});
</script>
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>
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>