This is a Multiple Drop down Select Box.this consist of simple code to select drop down and search a data in select box .u can search a data in select box.
J Query
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script>$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});</script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script>$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});</script>
CSS
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
Html
<form action="" method="post">
<div>
<label class="control-label">Multiple Dropdown Select Box</label>
<div>
<select data-placeholder="" name="program[]" class="chzn-select" multiple="multiple" tabindex="6" style="width:500px">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">Javascript</option>
<option value="jquery">J Query</option>
<option value="php" selected>PHP</option>
<option value="dot net">DOT NET</option>
</select>
</div>
</div>
<p align="center"> <input type="submit" name="submit" value="Submit"></p>
</form>
<div>
<label class="control-label">Multiple Dropdown Select Box</label>
<div>
<select data-placeholder="" name="program[]" class="chzn-select" multiple="multiple" tabindex="6" style="width:500px">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">Javascript</option>
<option value="jquery">J Query</option>
<option value="php" selected>PHP</option>
<option value="dot net">DOT NET</option>
</select>
</div>
</div>
<p align="center"> <input type="submit" name="submit" value="Submit"></p>
</form>
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Dropdown Select Box</title>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
</head>
<body>
<h2><a href="http://crackerworld.blogspot.in/">Cracker World</a></h2>
<div style="width:500px;margin:0 auto;">
<form action="" method="post">
<div>
<label class="control-label">Multiple Dropdown Select Box</label>
<div>
<select data-placeholder="" name="program[]" class="chzn-select" multiple="multiple" tabindex="6" style="width:500px">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">Javascript</option>
<option value="jquery">J Query</option>
<option value="php" selected>PHP</option>
<option value="dot net">DOT NET</option>
</select>
</div>
</div>
<p align="center"> <input type="submit" name="submit" value="Submit"></p>
</form>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script>$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});</script>
</body>
</html>
<html lang="en">
<head>
<title>Multiple Dropdown Select Box</title>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
</head>
<body>
<h2><a href="http://crackerworld.blogspot.in/">Cracker World</a></h2>
<div style="width:500px;margin:0 auto;">
<form action="" method="post">
<div>
<label class="control-label">Multiple Dropdown Select Box</label>
<div>
<select data-placeholder="" name="program[]" class="chzn-select" multiple="multiple" tabindex="6" style="width:500px">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">Javascript</option>
<option value="jquery">J Query</option>
<option value="php" selected>PHP</option>
<option value="dot net">DOT NET</option>
</select>
</div>
</div>
<p align="center"> <input type="submit" name="submit" value="Submit"></p>
</form>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script>$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});</script>
</body>
</html>
No comments:
Post a Comment