HOW TO DISABLE THE SELECTED OPTION AND SELECT AND DISPLAY MULTIPLE OPTION FROM THE DROPDOWN
STEPS TO IMPLEMENT MULTI SELECT DROPDOWN
- To give style to our multiselect dropdown, link following CSS directly from online in head section of your HTML file.
- Add following css to increase width of selection dropdown if we don't want vertical scrolling bar in head section of your HTML file.
- Add following javascript in <script> Section after body section of your HTML file
- Add following HTML code in body section of your HTML file
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
< style>
.chosen-container .chosen-results {
max-height: 280px;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
</script>
<form action="#" method="post">
<select data-placeholder="Start typing to filter..." multiple class="chosen-select" name="test" style="width:150px;">
<option value=""></option>
<option>HTML</option>
<option>CSS</option>
<option>JAVASCRIPT</option>
<option>AJAX</option>
<option>PHP</option>
<option>CODEIGNITER</option>
<option>>MY SQL</option>
<option>SEO</option>
<option>SMO</option>
<option>DIGITAL MARKETING</option>
</select>
<input type="submit">
</form>